/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */

/**
 * dragAndDropUpload.js
 *
 * This script is used to manage the behavior dragAndDrop for upload files
 *
 * LICENSE: This source file is subject to version 1.0 of the OpenFlyers
 * license that is available through the world-wide-web at the following
 * URI: https://openflyers.com/fr/entreprise/conditions-generales. If you did not receive a
 * copy of the OpenFlyers License and are unable to obtain it through the
 * web, please send a note to contact@openflyers.com so we can mail you
 * a copy immediately.
 *
 * @category    Javascript
 * @package     OpenFlyers
 * @author      EL HIDAM Loubna <loubna.elhidam@openflyers.com>
 * @copyright   2008 OPENFLYERS S.A.R.L. <contact@openflyers.com>
 * @license     https://openflyers.com/fr/entreprise/conditions-generales  OpenFlyers License
 * @since       Thu Des 28 2023
 * @link https://work.openflyers.com/OF4-RequestForm-class#addDragAndDropUploadFile
 */

/**
 * Constructor
 *
 * Init code on page load
 *
 * @return void
 */
$(document).ready(() => {
    // Init variables
    const uploadedFileListDiv = document.querySelector('.uploadedFileListDiv');
    const fileInput           = document.querySelector('input[type="file"]');
    const uploadedFileList    = document.querySelector('.uploadedFileList');
    let droppedFiles          = [];

    /**
     * updateFileList
     * update file list when upload them
     *
     * @return void
     */
    function updateFileList() {
        const filesArray = Array.from(fileInput.files);
        if (filesArray.length > 1) {
            uploadedFileList.innerHTML = '<p>' + translate('SELECTED_FILE') + '</p><ul><li>' + filesArray.map(f => f.name).join('</li><li>') + '</li></ul>';
        } else if (filesArray.length == 1) {
            uploadedFileList.innerHTML = '<p>' + translate('SELECTED_FILE') +  filesArray[0].name +'</p>';
        } else {
            fileList.innerHTML = '';
        }
    }
    if (uploadedFileListDiv!== null) {
        [ 'drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop' ].forEach( event => uploadedFileListDiv.addEventListener(event, function(e) {
            e.preventDefault();
            e.stopPropagation();
        }), false );

        // Add the isDragOver css class when either the dragover or dragenter events occur
        [ 'dragover', 'dragenter' ].forEach( event => uploadedFileListDiv.addEventListener(event, function() {
            uploadedFileListDiv.classList.add('isDragOver');
        }), false );

        // Remove the isDragOver css class when either the dragleave or dragend or drop events occur
        [ 'dragleave', 'dragend', 'drop' ].forEach( event => uploadedFileListDiv.addEventListener(event, function() {
            uploadedFileListDiv.classList.remove('isDragOver');
        }), false );

        // Manage drop event
        uploadedFileListDiv.addEventListener('drop', function(e) {
            droppedFiles = e.dataTransfer.files;
            fileInput.files = droppedFiles;
            updateFileList();
        }, false );

        // Manage change event
        fileInput.addEventListener( 'change', updateFileList );

        /**
         * Empty file list in order to bypass triggering the browser warning 'ERR_FILE_NOT_FOUND'
         * This warning occurs when a file is uploaded and then moved before saving the form.
         * Best practice: Always store the file upon upload using an onDemand action.
         */
        $('form').on('submit', function() {
            // Create a new file input element
            var newFileInput  = document.createElement('input');
            newFileInput.type = 'file';
            // Replace the existing file input with the new one
            fileInput.parentNode.replaceChild(newFileInput, fileInput);
        });
    }
});