/* *
 *  Bixie Printshop
 *  bix_upload_uikit.js
 *  Created on 21-12-2014 00:58
 *
 *  @author Matthijs
 *  @copyright Copyright (C)2014 Bixie.nl
 *
 */

(function (addon) {
    "use strict";

    var component;

    if (jQuery && jQuery.UIkit) {
        component = addon(jQuery, jQuery.UIkit);
    }

    if (typeof define == "function" && define.amd) {
        define("uikit-bixupload_uikit", ["uikit"], function () {
            return component || addon(jQuery, jQuery.UIkit);
        });
    }


})(function ($, UI) {

    UI.component('bixupload_uikit', {

        defaults: {
            debug: false,
            uploadID: '',
            uploadType: 'order',
            orderFilelimit: 0,
            selectors: {
                progressbar: '.bps-upload_uikit-progress',
                processbar: '.bps-upload_uikit-process',
                select: 'input[type=file]',
                drop: '.bps-upload_uikit-drop'
            },
            fileDetails: {
                showDate: true,
                allowDelete: true
            },
            deleteUrl: '/index.php?option=com_bixprintshop&format=raw&task=order.deleteFile',
            uploader: {
                action: '/index.php?option=com_bixprintshop&format=raw&task=order.upload',
                allow: '*.(pdf|jpg|jpeg|gif|png)',
                type: 'json',
                filelimit: false,
                sizelimit: 134217728, //128Mb
                params: {
                    settingsKey: 'plugins.upload_uikit',
                    uploadID: '',
                    uploadType: 'order',
                    orderID: 0,
                    sendMail: 0
                }
            },
            uploadTemplate: '<li>\
                {{#hasImage}}\
                  <div class="uk-float-right uk-thumbnail">\
                  <img src="{{thumb.url}}" width="{{thumb.width}}" height="{{thumb.height}}" alt="{{fileName}}"/></div>\
                {{/hasImage}}\
                <strong>{{fileName}}</strong><br/>\
                <span>{{sizeText}}</span><br/>\
                {{#showDate}}\
                  <span>{{dateText}}</span><br/>\
                {{/showDate}}\
                <a class="uk-button uk-button-mini" href="/{{download}}">\
                    <i class="uk-icon-download uk-margin-small-right"></i>Downloaden</a>\
                {{#allowDelete}}\
               <button class="uk-button uk-button-mini uk-button-danger" type="button" data-bix-upload_uikit-button="delete">\
                    <i class="uk-icon-download uk-margin-small-right"></i>Verwijderen</button>\
                {{/allowDelete}}\
           </li>'
        },

        boot: function () {
            // init code
            UI.ready(function (context) {
                $("[data-bix-upload_uikit]", context).each(function () {
                    var $ele = $(this);
                    if (!$ele.data("bixupload_uikit")) {
                        UI.bixupload_uikit($ele, UI.Utils.options($ele.attr('data-bix-upload_uikit')));
                    }
                });

            });
        },

        init: function () {
            var $this = this,
                progressbar = this.find(this.options.selectors.progressbar),
                processbar = this.find(this.options.selectors.processbar),
                bar         = progressbar.find('.uk-progress-bar'),
                settings    = $.extend(true, $this.options.uploader, {

                    notallowed: function(file, settings) {
                        var msg = UI.bixLang._('notAllowedExtension')
                            .replace('{file}', file.name)
                            .replace('{extensions}', UI.bixLang._('allowedExtensionsString'));
                        UI.notify(msg, {status: 'warning'});
                    },

                    before: function(settings, files) {
                        if($this.options.uploader.sizelimit > 0 && files[0].size > $this.options.uploader.sizelimit) {
                            var msg = UI.bixLang._('fileTooLarge')
                                .replace('{file}', files[0].name)
                                .replace('{sizeLimit}', UI.bixTools.formatFileSize($this.options.uploader.sizelimit));
                            UI.notify(msg, {status: 'warning'});
                            return false;
                        }
                    },

                    loadstart: function() {
                        bar.css("width", "0%").text("0%");
                        progressbar.removeClass("uk-hidden");
                    },

                    progress: function(percent) {
                        percent = Math.ceil(percent);
                        if (percent == 100) {
                            processbar.removeClass("uk-hidden")
                        }
                        bar.css("width", percent+"%").text(percent+"%");
                    },

                    complete: function(response) {
                        $this.uploadCompleted(response)
                    },

                    allcomplete: function(response) {

                        bar.css("width", "100%").text("100%");

                        setTimeout(function(){
                            progressbar.addClass("uk-hidden");
                            processbar.addClass("uk-hidden");
                        }, 250);

                    }
                });

            var select = UI.uploadSelect($(this.options.selectors.select), settings),
                drop   = UI.uploadDrop($(this.options.selectors.drop), settings);

            //requestvars
            this.options.uploader.params.uploadID = this.options.uploadID;
            this.options.uploader.params.uploadType = this.options.uploadType;

            //bestanden
            this.uploadTemplate = $('script[type="text/uploadTemplate"]').text();
            this.uploadTemplate = UI.Utils.template(this.uploadTemplate || this.options.uploadTemplate);
            this.fileList = this.find('[data-bix-upload_uikit-bestanden]');
            this.bestandenData = UI.Utils.options(this.fileList.data('bix-upload_uikit-bestanden'));
            this.bestandenData.bestanden.forEach(function (uploadFile) {
                $this.fileList.append($this.getUploadHtml(uploadFile));
            });
            this.checkFileCount();
            //bestanden events
            this.fileList.on('click','[data-bix-upload_uikit-button]', function (e) {
                var $button = $(e.target), task = $button.data('bix-upload_uikit-button'),
                    fileID = $button.closest('[data-bix-upload_uikit-fileid]').data('bix-upload_uikit-fileid');
                switch (task) {
                    case 'delete':
                        $this.deleteFile($button, fileID);
                        break;
                    default:
                        $this.trigger('clicked.bps.upload.' + task, [$this.options.uploader.params.orderID, $this.options.uploadID, fileID]);
                        break;
                }

            })

        },
        getUploadHtml: function (uploadFile) {
            return this.uploadTemplate($.extend(true, this.options.fileDetails, uploadFile))
                .replace(new RegExp('\/\/','g'),'/'); //filter mystery slash vanuit DOM templates
        },
        uploadCompleted: function (response) {
            if (response.success) {
                response.hasImage = response.thumb.url != '';
                response.isThumb = response.thumb.lbox != '';
                response.isIcon = response.thumb.isIcon;
                this.fileList.append(this.getUploadHtml(response));
                this.checkFileCount();
            } else {
                UI.notify({message: response.error, status: 'danger'});
            }
        },
        deleteFile: function ($button, fileID) {
            var $this = this;
            UI.modal.confirm('<h3 class="uk-modal-header">' + UI.bixLang._('verwijderBestandTitle') + '</h3>' + UI.bixLang._('verwijderBestandText'), function () {
                $button.find('i').addClass('uk-icon-spin');

                this.ajaxReq = $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: $this.options.deleteUrl,
                    data: {id: fileID, orderID: $this.options.uploader.params.orderID}
                })
                    .done(function (response) {
                        if (response.success) {
                            var fileHolder = $this.find('[data-bix-upload_uikit-fileid=' + fileID + ']').slideUp();
                            setTimeout(function () {
                                fileHolder.parent().append('<div class="uk-alert uk-alert-success" data-uk-alert>' +
                                    '<a href="" class="uk-alert-close uk-close"></a>' +
                                    UI.bixTools.icon('trash-o') + UI.bixLang._('verwijderBestandDeleted') + '</div>');
                                fileHolder.remove();
                                $this.checkFileCount();
                            }, 500);
                        }
                    })
                    .fail(function (jqXHR, textStatus) {
                        if (textStatus !== 'abort') {
                            UI.notify({message: UI.bixLang._('foutRequest'), status: 'danger'});
                        }
                    })
                    .always(function (response) {
                        $button.find('i').removeClass('uk-icon-spin');
                        if (response.messages) {
                            UI.bixTools.showNotifications(response.messages);
                        }
                    });


            });
        },
        checkFileCount: function () {
            if (this.options.orderFilelimit > 0) {
                var functionName = this.fileList.find('[data-bix-upload_uikit-fileid]').length >= this.options.orderFilelimit ?
                        'addClass' : 'removeClass';
                this.find(this.options.selectors.drop)[functionName]('uk-hidden')
            }
        }
    });

    return UI.bixupload_uikit;
});