/*
 * 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';
    var uploadButton = $( '<button/>' )
        .addClass( 'btn btn-action' )
        .prop('disabled', true )
        .text( 'Processing...' )
        .on('click', function () {
            var $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):
    $( '.file-input-text-noscript' ).hide();
    $( '.file-input-text-js' ).show();
    $( '.formsAsynchronousUploadHandler' ).each( handlerDisplayImages );

    // Add file(s) button(s) onclick event listener.
    $( document ).on('click','.file-input-text-js', function(e){
        e.stopImmediatePropagation();
        $(this).closest( 'div' ).find( 'input[type=file]' ).trigger('click');
        
    });

    $('.formsAsynchronousUploadHandler').on('click', function(){
		$('.invalid-feedback').remove();
	});
	

    $(document).on( 'click', '.formsAsynchronousUploadHandler', {} , handlerDisplayImages );
	    function handlerDisplayImages( ){
        var nof=$(this).data('nof') , 
            mfs = $(this).data('mfs'),
            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 );
        $(this).fileupload({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            dataType: 'json',
            url: 'https://ged-nso.apps.paris.fr/alfresco/s/fr/nso/preUpload',
            disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator && navigator.userAgent),
            imageMaxWidth: 1080,
            imageMaxHeight: 1080,
            previewMaxWidth: 80,
            previewMaxHeight: 80,
            imageCrop: false, // Force cropped images
            dropZone: $(this),
            maxNumberOfFiles: nof,
            maxFileSize: mfs,
            formData: [ {name:'fieldname',value:$(this)[0].name}, {name:'asynchronousupload.handler', value:'formsAsynchronousUploadHandler'} ],
            messages: {
                maxFileSize: msgMaxFileSize,
                maxNumberOfFiles: msgMaxNumberOfFiles,
            },
            singleFileUploads: false
        }).on('fileuploadprocessalways', function( e, data ){
            var index = data.index,
                file = data.files[index],
                fieldName = data.formData[0].value;
			
            if (file.error) {
                updateErrorBox( file.error, fieldName );
            }
			
        }).on('fileuploadprogressall', function( e, data ){
            $(' #progress_' + fieldName).show( );
            var progress = parseInt( data.loaded / data.total * 100, 10);
            var fieldName = this.name;
            var bar = $(' #progress-bar_' + fieldName);
            bar.html( progress + '%'  );
            bar.css( 'width', progress + '%' );
            if ( progress >= 100 ) {
                $(' #progress_' + fieldName).hide();
            }
        }).on('fileuploaddone', function( e, data ){
            var jsonData = {"fieldname":this.name, "asynchronousupload.handler":"formsAsynchronousUploadHandler", "nof": nof };
            $( '.select-all' ).removeClass( 'invisible' );
            formDisplayUploadedFiles(jsonData, '_form_upload_checkbox_');
        }).on('fileuploadfail', function( e, data ){
            var fieldName = data.formData[0].value;
            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';
        }
        //var jsonData = { "fieldname": this.name, "asynchronousupload.handler":"formsAsynchronousUploadHandler", "nof": nof };
        //formDisplayUploadedFiles( jsonData, '_form_upload_checkbox_' );
    };

    $('[id^="_form_upload_submit_"]').click(function(event) {
        event.preventDefault( );
    });

    // prevent user from quitting the page before his upload ended.
    $(document).on('click','[value^="_form_upload_delete_"]', {} ,function(event) {
        if(this.getAttribute("nojs") === null) {
            var fieldName = this.value.match("_form_upload_delete_(.*)")[1];
            removeFile_form_upload_checkbox_(fieldName, 'formsAsynchronousUploadHandler', 'https://ged-nso.apps.paris.fr/share/plainte/themeparisfr/');
            event.preventDefault( );
        }
    });
    
    $(document).bind('dragover', function (e) {
        var dropZones = $('.file-input'),
            timeout = window.dropZoneTimeout;
        if (timeout) {
            clearTimeout(timeout);
        } else {
            dropZones.addClass('in');
        }
        var hoveredDropZone = $(e.target).closest(dropZones);
        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('https://ged-nso.apps.paris.fr/alfresco/s/fr/nso/doRemove', jsonData,
    function ( data) { 
	var fileInput = document.querySelector('input[type="file"]');
        var nbFilesUploaded=0;
        var fieldName = data.field_name;
        var errorFileName=$( '#_file_error_box_' + fieldName ), 
        groupFiles = errorFileName.closest('.group-files');
		groupFiles.removeClass( 'is-invalid' );
        if ( fieldName != null ) {
            if ( filesList.length == 0 ) {
                $( "#_file_deletion_label_" + fieldName ).hide();
            } else {
                var strContent = "";
                var checkboxPrefix = cbPrefix + fieldName;
                for ( var index = 0; index < filesList.length; index++ ) {
                    var imgContent = ( (filesList.length == 1) ? filesList.preview : filesList[index].preview );
                    var imgTag = "";
                    if (typeof (imgContent) == "string" && imgContent.length > 0) {
                        imgTag = " <img src=" + "'" + imgContent + "'" + "alt='' " + " width='80' height='80'/>";
                    } 
					 
                    strContent = strContent + getTemplateUploadedFile(fieldName, index, checkboxPrefix, filesList, imgTag,'formsAsynchronousUploadHandler', 'https://ged-nso.apps.paris.fr/share/plainte/themeparisfr/');
                    nbFilesUploaded++;
                }
                $("#_file_deletion_" + fieldName).html( strContent );
                $("#_file_deletion_label_" + fieldName).show();
                if ( nbFilesUploaded >= jsonData.nof ){
                    let errMsg=$('#msg_' + fieldName );
                    if( errMsg.length === 0  ){
                        groupFiles.addClass('one-file');
                        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 {
                    $( '#msg_' + fieldName ).remove();
                }
            }
        }
        $( document ).find('.deleteSingleFile').on('click', '.deleteSingleFile', function(event) {
            event.preventDefault( );
            deleteFile( event );
        });
        hasChecked=true;
        $( '#btn-select-all-' + fieldName ).click();
    });
}

/**
 * Removes a file
 * @param action the action button name
 */
function removeFile_form_upload_checkbox_( fieldName, handlerName, baseUrl ) {
    // build indexes to remove
    var strIndexes = '',
        indexesCount = 0,
        checkboxPrefix = '_form_upload_checkbox_' + fieldName;
    $( '[name^="' + checkboxPrefix + '"]:checked' ).each( function() {
        if (this.checked) {
            if ( indexesCount > 0 ){
                strIndexes = strIndexes + ",";
            }
            indexesCount++;
            var index = this.name.match( checkboxPrefix + "(\\d+)")[1];
            strIndexes = strIndexes + index;
        }
    });
    if ( !indexesCount ){ return; }
    var jsonData = {"fieldname":fieldName, "asynchronousupload.handler":handlerName, "field_index": strIndexes};
    formDisplayUploadedFiles( jsonData, '_form_upload_checkbox_' );
}

/**
 * Removes a file on click
 */
$( document ).on('click', '.deleteSingleFile', function(event) {
    event.preventDefault( );
    const nof=$('.formsAsynchronousUploadHandler').data('nof');
    if( nof == 1 ){
        const groupFiles = $('.group-files') , fileInfo = $(document).find('.group-file-info');
        if( fileInfo.length > 0 ){ fileInfo.remove(); }
		groupFiles.removeClass( 'is-invalid' ).removeClass( 'one-file' );
    }
    deleteFile( event );
});

function deleteFile( ev ){
    var index = ev.currentTarget.getAttribute( "index" ); 
    var fieldName = ev.currentTarget.getAttribute( "fieldName" );
    var handlerName = ev.currentTarget.getAttribute( "handlerName" );
	removeFileFromFileList( parseInt(index));
    var jsonData = { "fieldname":fieldName, "asynchronousupload.handler":handlerName, "field_index": index };
    formDisplayUploadedFiles( jsonData, '_form_upload_checkbox_' );
}

function removeFileFromFileList(index) {
  const dt = new DataTransfer()
  for (let i = 0; i < filesList.length; i++) {
    const file = filesList[i]
    if (index !== i)
      dt.items.add(file) // here you exclude the file. thus removing it.
  }
  
  filesList = dt.files // Assign the updates list
}

function updateErrorBox( errorMessage, fieldName ){
    var errorFileName=$( '#_file_error_box_' + fieldName ), 
        groupFiles = errorFileName.closest('.group-files');
    if ( errorMessage != null && errorMessage !='' && errorMessage !== undefined || mapFileErrors.size > 0 ) {
        var 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' ) ){
                groupFiles.addClass( 'is-invalid' ).after( '<div class="invalid-feedback">' + strContent + '</div>' ).show( );
            }
        }
        mapFileErrors.delete(fieldName);
        mapFilesNumber.delete(fieldName);
    } else {
        //$('.invalid-feedback').remove( );
		groupFiles.removeClass( 'is-invalid' );
    }
}