import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core';

@Directive({
    selector: '[iqserDragDropFileUpload]',
})
export class DragDropFileUploadDirective {
    @Output() readonly fileDropped = new EventEmitter();
    @HostBinding('class.drag-over') private _dragOver = false;

    @HostListener('dragover', ['$event'])
    onDragOver(event: DragEvent) {
        event.preventDefault();
        event.stopPropagation();
        if (event.dataTransfer?.types.includes('Files')) {
            this._dragOver = true;
        }
    }

    @HostListener('dragleave', ['$event'])
    onDragLeave(event: DragEvent) {
        event.preventDefault();
        event.stopPropagation();
        this._dragOver = false;
    }

    @HostListener('drop', ['$event'])
    onDrop(event: DragEvent) {
        event.preventDefault();
        event.stopPropagation();
        if (event?.dataTransfer?.types.includes('Files')) {
            this._dragOver = false;
            const files = event.dataTransfer.files;
            if (files.length > 0) {
                this.fileDropped.emit({ target: { files } });
            }
        }
    }
}