import {type Can_Upload_Detail, __} from "./globals";

export class DropContainer {

    element: HTMLElement;
    text_element: HTMLElement;
    enabled: boolean;

    constructor(element: HTMLElement, text_element: HTMLElement) {

        this.element = element;
        this.text_element = text_element;
        this.enabled = true;

        this.addEvents();

    }

    switch(){

        this.enabled = !this.enabled;
        if( !this.enabled )
            this.text_element.innerHTML = __( "Please wait...", 'romhackplaza' );
        else
            this.text_element.innerHTML = __( "Drop files here or click to upload the file", 'romhackplaza' );

    }

    private addEvents(): void {

        this.element.addEventListener( 'click', (e: Event) => { this.submitFile(e) }, false );
        this.element.addEventListener( 'dragover', (e: Event) => e.preventDefault(), false );
        this.element.addEventListener( 'dragenter', (e: Event) => this.element.classList.add( 'drag-active'), false );
        this.element.addEventListener( 'dragleave', (e: Event) => this.element.classList.remove( 'drag-active'), false );
        this.element.addEventListener( 'drop', (e: Event) => { this.dropElement( e ); } );
    }

    submitFile( e: Event ): void {

        if( this.enabled ) {

            let input = document.createElement("input");
            input.type = "file";
            input.onchange = ( e: Event ) => {
                // @ts-ignore
                let files: Array<File> = Array.from( input.files );
                this.dispatchEvent( files[0] as File );
            }
            input.click();
        }
    }

    dropElement( e: Event ): void {

        e.preventDefault();
        this.element.classList.remove( 'drag-active');
        if( this.enabled )
            // @ts-ignore
            this.dispatchEvent( e.dataTransfer.files[0] );
    }

    dispatchEvent( file: File ) {

        const evt = new CustomEvent<Can_Upload_Detail>( 'can_upload', {
            detail: {
                file
            }
        });
        document.dispatchEvent(evt);

    }

}