/*
 * jQuery File Upload Plugin JS Example 8.9.1
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */
/*  global $, window                     */
$(function (){
    'use strict';
    const uploadButton = $( '<button/>' )
        .addClass( 'sr-only' )
        .prop('disabled', true )
        .text( 'Processing...' )
        .on('click', function () {
            const $this = $(this),
                data = $this.data();
                $this
                    .off('click')
                    .text('Abort')
                    .on('click', function () {
                        $this.remove();
                        data.abort();
                    });
                data.submit().always( function () {
                    $this.remove();
                });
        });
    // Initialize the jQuery File Upload widget & show add file(s) button(s):
    $( '.formsAsynchronousUploadHandler' ).each( handlerDisplayImages );
    $( '.formsAsynchronousUploadHandler' ).on('click', function(){
        $( '.invalid-feedback' ).remove();
        $( '.dropzone label' ).removeClass('main-danger-color');
    });

    $(document).on( 'click', '.formsAsynchronousUploadHandler', {} , handlerDisplayImages );

    function handlerDisplayImages(){
        const nof=$(this).data('nof') , 
            mfs = $(this).data('mfs'),
            atf = $(this).data('atf'),
            nfu = $(this).attr('data-nfu'),
            msgMaxFileSize='Le fichier sélectionné est trop gros. Il ne doit pas dépasser plus de {0}.'.replace( '{0}', prettySize( mfs ) ),
            msgMaxNumberOfFiles='Vous avez sélectionné trop de fichiers. Le nombre maximum de fichiers à télécharger est {0}.'.replace( '{0}', nof ),
            msgAcceptFileTypes='Seuls les fichiers de type "{0}" sont acceptés'.replace( '{0}', atf ).replace( ',', ' ou ' );
        $(this).fileupload({
            // Uncomment the following to send cross-domain cookies:
            // xhrFields: {withCredentials: true},
            dataType: 'json',
            url: 'http://localhost:8080/theme15/jsp/site/upload',
            disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator && navigator.userAgent),
            imageMaxWidth: 1080,
            imageMaxHeight: 1080,
            previewMaxWidth: 80,
            previewMaxHeight: 80,
            imageCrop: false, // Force cropped images
            dropZone: $(this).parentsUntil('.step-group'),
            maxNumberOfFiles: nof,
            maxFileSize: mfs,
            formData: [ {name:'fieldname',value:$(this)[0].name}, {name:'asynchronousupload.handler', value:'formsAsynchronousUploadHandler'} ],
            messages: {
                maxFileSize: msgMaxFileSize,
                maxNumberOfFiles: msgMaxNumberOfFiles,
                acceptFileTypes: msgAcceptFileTypes,
            },
            singleFileUploads: false
        }).on('fileuploadprocessalways', function( e, data ){
            const index = data.index,
                file = data.files[index],
                fieldName = data.formData[0].value;
                if ( file.error ) {
                    updateErrorBox( file.error, fieldName );
                }
        }).on( 'fileuploadprogressall', function( e, data ){
            const fieldName = this.name;
            $(' #progress_' + fieldName ).show( );
            const bar = $(' #progress-bar_' + fieldName);
            let progress = parseInt( data.loaded / data.total * 100, 10);
            bar.html( progress + '%'  );
            bar.css( 'width', progress + '%' );
            if ( progress >= 100 ) {
                $(' #progress_' + fieldName).hide();
            }
        }).on( 'fileuploaddone', function( e, data ){
            const jsonData = { "fieldname": this.name, "asynchronousupload.handler":"formsAsynchronousUploadHandler", "nof": nof };
            $( '.select-all' ).removeClass( 'invisible' );
            $( '#btn-select-all-formsAsynchronousUploadHandler' ).removeClass( 'invisible' );
            const fieldName = this.name;
            if( data.result.form_error != undefined ){
                updateErrorBox( data.result.form_error, fieldName );
            } else {
                formDisplayUploadedFiles( jsonData, '_form_upload_checkbox_' );
            }

        }).on('fileuploadfail', function( e, data ){
            const fieldName = data.formData[0].value;
            if( mapFileErrors.get( fieldName) != undefined  ){
                mapFileErrors.set( fieldName, "Une erreur est survenue lors de l'upload du fichier" );
                updateErrorBox( "Une erreur est survenue lors de l'upload du fichier", fieldName );
                $(' #progress_' + fieldName).hide();
            }
        }).prop('disabled', !$.support.fileInput).parent().addClass( $.support.fileInput ? undefined : 'disabled' );
        if( !this.parentNode.classList.contains( 'fileinput-button' ) ){
            this.parentNode.className=this.parentNode.className + ' fileinput-button';
        }
        if( nfu >= nof ){
            $('#' + $(this)[0].name ).prop('disabled', true )
            $('#' + $(this)[0].name ).closest('.dropzone').addClass('inactive' )
        }
    };

    $('[id^="_form_upload_submit_"]').click(function(event) {
        event.preventDefault( );
    });
    
    $(document).on('dragover', function (e) {
        const dropZones = $('.dropzone'),
            timeout = window.dropZoneTimeout,
            hoveredDropZone = $(e.target).closest( dropZones );
        if (timeout) {
            clearTimeout(timeout);
        } else {
            dropZones.addClass('in');
        }
        dropZones.not( hoveredDropZone ).removeClass( 'hover' );
        hoveredDropZone.addClass('hover');
        window.dropZoneTimeout = setTimeout(function () { 
            window.dropZoneTimeout = null; 
            dropZones.removeClass('in hover');
        }, 100);
    });
});

/**
 * Sets the files list
 * @param jsonData data
 */
 function formDisplayUploadedFiles( jsonData, cbPrefix  ){
    $.getJSON('http://localhost:8080/theme15/jsp/site/plugins/asynchronousupload/DoRemoveFile.jsp', jsonData,
    function ( data ) { 
        const fieldName = data.field_name, 
              errorFileName=$( '#_file_error_box_' + fieldName ), 
              groupFiles = errorFileName.closest('.group-files');
        const jFieldName =  $( '#' + fieldName )
        const parentInput = jFieldName.parent();
        parentInput.removeClass( 'is-invalid' )
        
        reinitMsg( groupFiles  );
        
        if ( fieldName != null ) {
            if ( data.fileCount == 0 ) {
                jFieldName.attr( 'data-nfu', '0' );
                jFieldName.removeAttr( 'disabled' );
                jFieldName.removeClass( 'disabled' );
                jFieldName.off( "click");
                jFieldName.closest('.dropzone').removeClass('inactive' )
                $( "#_file_deletion_label_" + fieldName ).hide();
            } else {
                let strContent = '';
                let checkboxPrefix = cbPrefix + fieldName;
                for ( var index = 0; index < data.fileCount; index++ ) {
                    let imgContent = ( (data.fileCount == 1) ? data.files.preview : data.files[index].preview );
                    let imgTag = "";
                    if ( typeof (imgContent) == "string" && imgContent.length > 0 ){
                        imgTag = " <img src=" + "'" + imgContent + "'" + "alt='' " + " width='80' height='80'/>";
                    }
                    strContent = strContent + getTemplateUploadedFile(fieldName, index, checkboxPrefix, data, imgTag,'formsAsynchronousUploadHandler', 'http://localhost:8080/theme15/', 'Supprimer');
                }
                $("#_file_deletion_" + fieldName).html( strContent );
                $("#_file_deletion_label_" + fieldName).show();

                if ( data.fileCount >= jsonData.nof ){
                    jFieldName.attr('data-nfu', jsonData.nof );
                    jFieldName.attr('data-nbuploadedfiles', jsonData.nof );
                    jFieldName.prop('disabled', true );
                    jFieldName.addClass('disabled');
                    jFieldName.closest('.dropzone').addClass('inactive' )
                    groupFiles.addClass('no-file');
                    const errMsg=$('#msg_' + fieldName );
                    if( errMsg.length === 0  ){
                        jFieldName.attr('aria-labelledby','msg_' + fieldName )
                        groupFiles.after('<p id="msg_' + fieldName + '" class="group-file-info text-muted p-2 mt-1"><span class="fa fa-exclamation-circle text-warning"></span> Attention nombre maximum de fichier atteint !</p>');
                    }
                } else {
                    jFieldName.attr('data-nfu', data.fileCount );
                    jFieldName.attr('data-nbuploadedfiles', data.fileCount );
                    jFieldName.removeAttr( 'disabled' );
                    jFieldName.removeClass( 'disabled' );
                    jFieldName.closest('.main-danger-color').removeClass('main-danger-color' )
                    jFieldName.off( "click");
                    jFieldName.removeAttr( 'aria-labelledby' );
                    jFieldName.closest('.dropzone').removeClass('inactive' )
                    $( '#msg_' + fieldName ).remove();
                }
            }
        }

        $( document ).find('.deleteSingleFile').on('click', '.deleteSingleFile', function(event) {
            event.preventDefault( );
            deleteFile( event );
        });
    });
    
}

/**
 * Removes a file on click
 */
$( document ).on('click', '.deleteSingleFile', function(event) {
    event.preventDefault( );
    deleteFile( event );
});

function deleteFile( ev ){
    const index = ev.currentTarget.getAttribute( 'index' ); 
    const fieldName = ev.currentTarget.getAttribute( 'fieldname' );
    const itemId = ev.currentTarget.dataset.item;
    const item = document.querySelector( itemId );
    item.remove();
    const handlerName = ev.currentTarget.getAttribute( 'handlername' );
    const nof=$('.formsAsynchronousUploadHandler').data('nof');
    const jsonData = { "fieldname": fieldName, "asynchronousupload.handler": handlerName, "field_index": index, "nof": nof };
    formDisplayUploadedFiles( jsonData, '_form_upload_checkbox_' );
}

/**
 * Update error
 */
function updateErrorBox( errorMessage, fieldName ){
    let strContent = '';
    const errorFileName=$( '#_file_error_box_' + fieldName ), groupFiles = errorFileName.closest('.group-files');
    if ( errorMessage != null && errorMessage !='' && errorMessage !== undefined || mapFileErrors.size > 0 ) {
        strContent = mapFileErrors.size > 0 ? mapFileErrors.get( fieldName ) : errorMessage;
		if( mapFilesNumber.get( fieldName ) > 1 ){
			errorFileName.after( '<div class="invalid-feedback">' + strContent + '</div>' ).show( );
        } else {
			if( !groupFiles.hasClass( 'is-invalid' ) || strContent !=''  ){
                groupFiles.addClass( 'is-invalid' ).after( '<div class="invalid-feedback">' + strContent + '</div>' ).show( );
            }
        }
        mapFileErrors.delete(fieldName);
        mapFilesNumber.delete(fieldName);
    } else {
		groupFiles.removeClass( 'is-invalid' );
    }
}

/**
 * Removes clean msg
 */
function reinitMsg( group ){
    const fileInfo = $(document).find('.group-file-info'), invalidFeedback= $(document).find('.invalid-feedback');
    fileInfo.remove();
    invalidFeedback.remove();
    $( '.dropzone label' ).removeClass('main-danger-color');
    group.removeClass( 'is-invalid' ).removeClass( 'no-file' );
}