/*
 * jQuery File Upload Plugin JS Example
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * https://opensource.org/licenses/MIT
 */

/* global $, window */

$(function () {
    'use strict';

    $('.fileupload_img').each(function() {
        if ($(this).attr('id') == 'fileupload_img') {
            $(this).fileupload({
                // Uncomment the following to send cross-domain cookies:
                //xhrFields: {withCredentials: true},
                url: 'https://upload.mobile01.com/upload/forumupload.php',
                autoUpload: false,
                sequentialUploads: true,
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png|pjpg|x-png|heic|dng)$/i,
                dropZone: $(this)
            }).on('fileuploadadd', function (e, data) {
                $('#fileupload_img #progress .progress-bar').css(
                    'width',
                    '0%'
                );
                $('#fileupload_img #progress').show();
            }).on('fileuploadprogressall', function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#fileupload_img #progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }).on('fileuploadsubmit', function (e, data) {
                var sid = mobile01_upload();
                data.formData = {
                     'addurl'            : $('#img_addurl').is(':checked'),
                     'sharpen'           : $('#img_sharpen').is(':checked'),
                     'uploadhires'       : $('#img_uploadhires').is(':checked'),
                     'exifsave'          : $('#img_exifsave').is(':checked'),
                     'sid'               : sid
                };
            }).on('fileuploaddone', function (e, data) {
                if (e.isDefaultPrevented()) {
                    return false;
                }
                var content = '';
                var that = $(this).data('blueimp-fileupload') ||
                        $(this).data('fileupload'),
                    getFilesFromResponse = data.getFilesFromResponse ||
                        that.options.getFilesFromResponse,
                    files = getFilesFromResponse(data),
                    template,
                    deferred;
                if (data.context) {
                    var addurl      = $('#img_addurl').is(':checked');
                    var sharpen     = $('#img_sharpen').is(':checked');
                    var uploadhires = $('#img_uploadhires').is(':checked');
                    var exifsave    = $('#img_exifsave').is(':checked');

                    data.context.each(function (index) {
                        if (typeof(files[index].error) != 'undefined') {
                            $.fancyAlert({
                                popUpsize : 'c-popUp--sm',
                                icon      : 'c-icon--sendSuccessGn',
                                titlesize : 't4',
                                title     : files[index].error,
                                msgsize   : 'o-fSubMini',
                                message   : '',
                                Button    : '確定',
                                smallBtn  : false,
                                model     : false,
                                callback  : function (value) {
                                    $('#fileupload_img #progress').hide("slow");
                                    $.fancybox.close();
                                    $('#fileupload_img ul.c-gallery > li').remove();
                                }
                            });
                        } else {
                            var ext = files[index].url.split('.').pop();
                            if (ext != 'zip') {
                                let img_files;
                                if (uploadhires) {
                                    img_files = {"hires":files[index].url,"url":files[index].preview_url,"exif":""};
                                    if (exifsave && files[index].exif != '') {
                                        var exif = '';
                                        $.each(files[index].exif, function(index, value) {
                                           exif = exif + ' ' + value;
                                        });
                                        if (exif != '') {
                                            img_files['exif'] = exif;
                                        }
                                    }
                                } else {
                                    img_files = {"hires":"","url":files[index].url,"exif":""};
                                }
                                content = content + build_img_content(img_files)+"\n";
                            }

                            var file = files[index] ||
                                    {error: 'Empty file upload result'};
                            deferred = that._addFinishedDeferreds();
                            that._transition($(this)).done(
                                function () {
                                    var node = $(this);
                                    template = that._renderDownload([file])
                                        .replaceAll(node);
                                    that._forceReflow(template);
                                    that._transition(template).done(
                                        function () {
                                            data.context = $(this);
                                            that._trigger('completed', e, data);
                                            that._trigger('finished', e, data);
                                            deferred.resolve();
                                        }
                                    );
                                }
                            );
                        }
                    });

                    $('#gallery_img').append(content);
                } else {
                    template = that._renderDownload(files)[
                        that.options.prependFiles ? 'prependTo' : 'appendTo'
                    ](that.options.filesContainer);
                    that._forceReflow(template);
                    deferred = that._addFinishedDeferreds();
                    that._transition(template).done(
                        function () {
                            data.context = $(this);
                            that._trigger('completed', e, data);
                            that._trigger('finished', e, data);
                            deferred.resolve();
                        }
                    );
                }
                if ($("#fileupload_img li.template-upload").length == 0) {
                    $('#fileupload_img #progress').hide("slow");
                    $.fancybox.close();
                    $('#fileupload_img ul.c-gallery > li').remove();
                }
            });
        }
    })

    $(document).on('click', "#gallery_img .extra_img .img_cancel",function(e) {
        e.preventDefault();

        $(this).closest('.extra_img').remove();
    });

    $(document).on('click', "#gallery_img .extra_img .old_img_cancel",function(e) {
        e.preventDefault();

        var old_img_files_obj = [];
        if ($('#old_images').val()) {
            old_img_files_obj = $('#old_images').val().split(',');
        }

        let img = $(this).closest('.extra_img').find("input[name='old_img_files[]']").val();
        old_img_files_obj.push(img);
        $("#old_images").val(old_img_files_obj);

        $(this).closest('.extra_img').remove();
    });
});

function build_img_content(data) {
    var list = '<li class="extra_img fade">'+
                '<div class="img_area">'+
                '<img src="' + data.url + '">' +
                '<input type="hidden" name="img_files[]" value="' + data.url + '">'+
                '<input type="hidden" name="img_hires[]" value="' + data.hires + '">'+
                '<input type="hidden" name="img_exif[]" value="' + data.exif + '">'+
                '<div class="btn_area">'+
                '<button type="button" class="btn btn-warning img_cancel" style="border:0px;cursor:pointer;">'+
                '<i class="c-icon c-icon--btnDeletGy c-icon--fsm c-icon--trash"></i>'+
                '</button>'+
                '</div>'+
                '</div>'+
                '</li>';
    return list;
}