/*
 * 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-primary')
        .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):
    $(document).ready(function(){
        $(".file-input-text-noscript").hide();
        $(".file-input-text-js").show();
        $('.appointmentAsynchronousUploadHandler').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');
    });

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

    function handlerDisplayImages(){
        $(this).fileupload({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            dataType: 'json',
            url: 'https://inscriptions.lyon.fr/inscriptionSimple/InscriptionSimple/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),
            maxFileSize: 209715200,
            formData: [{name:'fieldname',value:$(this)[0].name}, {name:'asynchronousupload.handler', value:'appointmentAsynchronousUploadHandler'}],
            messages: {
                maxFileSize: "The selected file is too large. Its size must not exceed {0}.",

            },
            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) {
            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 + '%' );

            $(' #progress_' + fieldName).show( );

            if ( progress >= 100 )
            {
                $(' #progress_' + fieldName).hide();
            }
        }).on('fileuploaddone', function (e, data) {
            formDisplayUploadedFiles( data.result, data.files, '_appointment_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');
        this.parentNode.className=this.parentNode.className + ' fileinput-button';

        var jsonData = {"fieldname":this.name, "asynchronousupload.handler":"appointmentAsynchronousUploadHandler"};
        $.getJSON('https://inscriptions.lyon.fr/inscriptionSimple/InscriptionSimple/jsp/site/plugins/asynchronousupload/DoRemoveFile.jsp', jsonData,
            function(json) {
                formDisplayUploadedFiles(json, null, '_appointment_upload_checkbox_');
            }
        );
    };

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

    // prevent user from quitting the page before his upload ended.
    $(document).on('click','[value^="_appointment_upload_delete_"]', {} ,function(event) {
        if(this.getAttribute("nojs") === null) {
        var fieldName = this.value.match("_appointment_upload_delete_(.*)")[1];
        removeFile_appointment_upload_checkbox_(fieldName, 'appointmentAsynchronousUploadHandler', 'https://inscriptions.lyon.fr/inscriptionSimple/InscriptionSimple/');
        event.preventDefault( );
        }
    });

});

/**
 * Sets the files list
 * @param jsonData data
 */
function formDisplayUploadedFiles( jsonData, files, cbPrefix )
{
    // create the div
    var fieldName = jsonData.field_name;

    updateErrorBox(jsonData.form_error, fieldName);

    if ( fieldName != null )
    {
        if ( jsonData.fileCount == 0 ){
            // no file uploaded, hiding content
            $("#_file_deletion_label_" + fieldName ).hide(  );
        } else {

            var strContent = "";
            var checkboxPrefix = cbPrefix + fieldName;

            // jsonData.uploadedFiles.length is str length when file count is 1 so using fileCount instead.
            // so if jsonData.fileCount == 1, the index should not be used
            for ( var index = 0; index < jsonData.fileCount; index++ )
            {
                var imgContent = ( (jsonData.fileCount == 1) ? jsonData.files.preview : jsonData.files[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, jsonData, imgTag, 'appointmentAsynchronousUploadHandler', 'https://inscriptions.lyon.fr/inscriptionSimple/InscriptionSimple/');

            }

            $("#_file_deletion_" + fieldName ).html( strContent );
            // show the hidden div (if not already)
            $("#_file_deletion_label_" + fieldName ).show(  );
        }
    }
}

/**
 * Removes a file
 * @param action the action button name
 */
function removeFile_appointment_upload_checkbox_( fieldName, handlerName, baseUrl ) {
    // build indexes to remove
    var strIndexes = '';

    var indexesCount = 0;
    var checkboxPrefix = '_appointment_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};

    $.getJSON(baseUrl + 'jsp/site/plugins/asynchronousupload/DoRemoveFile.jsp', jsonData,
        function(json) {
            formDisplayUploadedFiles(json, null, '_appointment_upload_checkbox_');
        }
    );
}

function updateErrorBox( errorMessage, fieldName )
{
    if ( errorMessage != null && errorMessage != '' )
    {
        var strContent = '<span class="text-danger">' + errorMessage + '</span>'
        $( '#_file_error_box_' + fieldName ).html( strContent );
        $( '#_file_error_box_' + fieldName ).show( );
    }
    else
    {
        $( '#_file_error_box_' + fieldName ).hide( );
    }
}