/**
 * Add image upload dialog for Batchaction buttons.
 *
 * The `.productUiVariationuploadimagesUnity()` method adds functionality to open an image upload dialog.
 *
 *
 * ### Examples
 * Apply .productUiVariationuploadimagesUnity() to Button element.
 *
 * JavaScript:
 *
 *     de_epages('button')
 *         .productUiVariationuploadimagesUnity({
 *              action: 'myDummyChangeAction',
 *              items: function() {
 *                  return [];
 *              }
 *         });
 *
 * HTML:
 *
 *     <button>Click Me!</button>
 *
 *
 * @class jQuery.ui.productUiVariationuploadimagesUnity
 *
 * @uses de_epages
 * @uses ep
 * @uses ep.ui.dialog
 * @uses jquery.ui.widget
 * @since 7.2.0
 */

/**
 * @cfg {String} action Name of the Changeaction for submitting the image
 * @cfg {Function} items Function returning an Array of Strings of Object Ids for the target products
 */

/*
 * @copyright       © Copyright 2006-2010, epages GmbH, All Rights Reserved.
 *
 * @module          de_epages/product/ui/appointmentpicker
 */
define('de_epages/product/ui/variationuploadimages-unity', [
    'jquery',
    'ep',
    '$tmpl!de_epages/product/ui/variationuploadimages-unity',
    '$dict!de_epages/product/ui/variationuploadimages-unity',

    "jquery/ui/widget",
    'ep/ui/dialog'
], function ($, ep, tmplUploadForm, dict) {

    /*
     * @dictionary      ep.dict
     *
     * @translations    {Save}
     *                  {Cancel}
     *                  {UploadImage}
     *
     * @dictionary      de_epages.product.ui.variationuploadimages
     *
     * @translation    {UnityUseMasterProductImage}
     */

    // translation object
    var translations = {
        Save: dict.translate('Save'),
        Cancel: dict.translate('Cancel'),
        UploadImage: dict.translate('UploadImage'),

        UseMasterProductImage: dict.translate('UnityUseMasterProductImage')
    };

    $.widget('ui.productUiVariationuploadimagesUnity', {
        templateElements: {},

        options: {
            action: 'myDummyChangeAction',
            items: function() {
                return [];
            }
        },

        _create: function() {
            var self = this,
                elem = self.element,
                o = self.options,
                templateOptions = [{
                    tUploadImages: translations.UploadImage,
                    tUseMasterProductImage: translations.UseMasterProductImage
                }];

            // load template and push named tmpl elements to current instance
            self.dialogContent = tmplUploadForm(templateOptions);
            $.extend(self.templateElements, self.dialogContent.tmplItem('elements'));

            // register open dialog action to batch action button
            elem.on('click', function(evt) {
                self._openDialog();
            });

            self._openDialog();

            // event handler image uploader
            self.templateElements.useMasterProductImage.on('change', function(evt) {
                self._checkSaveButton();

                // reset preview image
                if (!!this.checked) {
                    self._resetPreviewImage();
                }
            });
            self.templateElements.fileInput.on('change', function(evt) {
                self._handleFile(evt);
            });

            /* * * * * *
             * To use the drag and drop functionality we need to
             * implement an file upload via ajax and use the
             * formData object, example see at
             * http://playground.quaese.de/tutorials/drag_drop_upload_formdata_html5/
             * Then the following comment can be removed.
             * * * * * */
            /*
            self.templateElements.dropzone.on('dragover', function(evt) {
                self._handleDragOver(evt);
            });
            self.templateElements.dropzone.on('drop', function(evt) {
                self._handleDrop(evt);
            });
            // register handler for drag and drop and file input
            // do not allow dropping on body
            $('body').on('dragover', function (e) {
                e.stopPropagation();
                e.preventDefault();

                e.originalEvent.dataTransfer.dropEffect = 'none';
            });
            */
        },

        _openDialog: function() {
            var self = this,
                o = self.options,
                idString = Array.from(o.items()).map(function(checkbox) {
                    return checkbox.value;
                }).join(',');

            self.templateElements.attributeIDs.val(idString);

            // open if dialog exists, otherwise create new dialog
            if (self.dialog) {
                self.dialog.uiDialog('open');

            } else {
                self.dialog = ep(self.dialogContent).uiDialog({
                    modal: true,
                    autoOpen: true,
                    width: 400,
                    title: translations.UploadImage,
                    form: {
                        action: o.action,
                        method: 'post',
                        enctype: 'multipart/form-data'
                    },
                    close: function(){
                        self._resetPreviewImage();
                        self._resetForm();
                    },
                    buttons:{
                        Ok:     {
                            type: 'submit',
                            text: translations.Save,
                            disabled: true
                        },
                        Cancel: {
                            click: function(){
                                ep(this).uiDialog('close');
                            },
                            text: translations.Cancel
                        }
                    }
                });
            }
        },

        _handleFile: function(evt) {
            var self = this;

            if (evt.originalTarget.files.length) {
                self._fileReader(evt.originalTarget.files[0]);
            } else {
                self._resetPreviewImage();
                self._checkSaveButton();
            }
        },

        _checkSaveButton: function() {
            var self = this,
                imageUploaded = self.templateElements.fileInput.prop('files').length,
                useMasterProductImage = self.templateElements.useMasterProductImage.prop('checked');

            self.dialog.uiDialog('option', 'buttons').Ok.prop('disabled', !(imageUploaded || useMasterProductImage));
        },

        _resetPreviewImage: function() {
            var self = this;

            self.templateElements.dropzone.removeClass('ep-variationuploadimage-dropzone-handle');
            self.templateElements.dropzone.css('background-image', '');
            self.templateElements.dropzoneIcon.show();
            self.templateElements.fileInput.val('');
        },


        _resetForm: function() {
            var self = this;

            self.templateElements.attributeIDs.val('');
            self.templateElements.useMasterProductImage.prop('checked', false);
            self.templateElements.fileInput.val('');
        },

        // FileReader
        _fileReader: function(file){
            var self = this,
                elem = self.element,
                o = self.options,
                reader = new FileReader();

            reader.onload = function(evt){
                var fileReader = this;

                // call handler to process file
                self._readerSuccessHandler(fileReader, file, evt);
            };

            reader.onerror = self._readerErrorHandler;

            reader.readAsDataURL(file);
        },

        _readerSuccessHandler: function(fileReader, file, evt) {
            var self = this,
                img = new Image();

            // image source contains content of FileReader
            img.src = fileReader.result;

            // load handler for image
            img.addEventListener('load', function(evt) {
                // display new image
                self.templateElements.dropzone.addClass('ep-variationuploadimage-dropzone-handle');
                self.templateElements.dropzone.css('background-image', 'url(' + img.src + ')');
                self.templateElements.dropzoneIcon.hide();
                self.templateElements.useMasterProductImage.prop('checked', false);
                self._checkSaveButton();
            }, false);
        },

        _readerErrorHandler: function() {
            // error message
            console.log("readerErrorHandler: ", arguments);
        },

        // DnD
        _handleDragOver: function(evt) {
            evt.stopPropagation();
            evt.preventDefault();

            evt.originalEvent.dataTransfer.dropEffect = 'copy';
        },

        // Drop-Handler
        _handleDrop: function(evt) {
            var self = this;

            evt.stopPropagation();
            evt.preventDefault();

            self._fileReader(evt.originalEvent.dataTransfer.files[0]);
        },

        destroy: function () {
            var self = this;

            self.dialog.uiDialog('destroy');
            self._superApply(arguments);
        }
    });

    return de_epages;

});