import {addGlobalEventListener} from 'Global/Utils/event'

export function updateInputFileFace(input) {
    let file = input.files[0];

    let error = null;
    if (file.size > window.fileSizeMax) {
        error = window.oxaproc.trad['FileSizeMax']
            .replace('@1@', Math.ceil(window.fileSizeMax / 1000000)/* Convert byte to Mb */);
    }
    input.closest('.file-wrap').querySelector('p').innerHTML = 
        file.name 
        + (error ? 
            '<br><span class="error">'+error+'</span>' : ''
        );
}
export function inputFile(name) {
    

    let $input = $("#import"+name);

    $input.on("change", function () {
        let file = this.files[0];
        updateInputFileFace(this);
        window.jForm.delete("import"+name);
        window.jForm.append("import"+name, file);
    });

    $(document).on("dragenter", "#import"+name, function() {
        $("#file-wrap"+name).css("border", "2px dashed #3377CB");
        
        return false;
    });
        
    $(document).on("dragover", "#import"+name, function(e){
        e.preventDefault();
        e.stopPropagation();
        $("#file-wrap"+name).css("border", "2px dashed #3377CB");
        
        return false;
    });
        
    $(document).on("dragleave", "#import"+name, function(e) {
        e.preventDefault();
        e.stopPropagation();
        $("#file-wrap"+name).css("border", "2px dashed #ccc");
        
        return false;
    });

    $(document).on("drop", "#import"+name, function(e) {
        e.preventDefault(); // Prevent Chrome from opening the file
        e.stopPropagation();
        var firstFile = e.originalEvent.dataTransfer.files[0];
        window.jForm.delete("import"+name);
        window.jForm.append("import"+name, firstFile);
        let input = document.getElementById("import"+name); 
        input.files = e.originalEvent.dataTransfer.files;
        
        updateInputFileFace(input);
        $("#file-wrap"+name).css("border", "2px dashed #ccc");
        return false; 
    });

}

export const InputFile = {
    _boot: () => {

        if(! window.jForm) {
            window.jForm = new FormData();
        }

        //________________________
        // New input file (src\Modules\GlobalApplication\Views\Input\inputFile.twig)
        addGlobalEventListener('change', '[data-input-file]', (e) => {
            updateInputFileFace(e.target);
        })
        addGlobalEventListener('dragenter', '[data-input-file]', (e) => {
            $(e.target.closest('[data-input-wrapper]')).css("border", "2px dashed #3377CB");
        })
        addGlobalEventListener('dragover', '[data-input-file]', (e) => {
            $(e.target.closest('[data-input-wrapper]')).css("border", "2px dashed #3377CB");
        })
        addGlobalEventListener('dragleave', '[data-input-file]', (e) => {
            $(e.target.closest('[data-input-wrapper]')).css("border", "2px dashed #ccc");
        })
        addGlobalEventListener('drop', '[data-input-file]', (e) => {
            e.preventDefault(); // Prevent Chrome from opening the file
            e.stopPropagation();

            e.target.files = e.dataTransfer.files;
            updateInputFileFace(e.target);

            $(e.target.closest('[data-input-wrapper]')).css("border", "2px dashed #ccc");
        })
    }
}