/*globals define, window*/

define('de_epages/product/inc/variationuploadimages', [
    'jquery',
    '$dict!de_epages/product/inc/variationuploadimages',

    'ep/ui/dialog',
    'de_epages/presentation/ui/uploadimage'
], function ($, dict) {
    'use strict';

    var defaults = {
        objectId: undefined,
        optgroup: undefined,
        productImageLarge: {},
        masterProductImage: ''
    };

    /**
     * Initiate a new varaitionuploadimages dialog
     *
     * @since 6.17.2
     * @cfg {Object}    options                             Options to pass to the setup
     * @cfg {Integer}   options.objectId=undefined          ObjectID
     * @cfg {String}    options.optgroup=undefined          HTML fo building the attribute select box
     * @cfg {Object}    options.productImageLarge={}        Dimensions of the resulting product image
     * @cfg {Integer}   options.productImageLarge.width     Width of the resulting product image
     * @cfg {Integer}   options.productImageLarge.height    Height of the resulting product image
     * @cfg {String}    options.masterProductImage=''          Path to the master product's image
     * @return {Function}
     */
    return function (options) {

        var optionSelected,
            valueID,
            attr,
            o = $.extend(true, {}, defaults, options),
            uploadData = {
                ObjectID: o.objectId,
                ChangeAction: 'JSONUploadImageForSameVariations',
                SCALE_WIDTH_l: o.productImageLarge.width,
                SCALE_HEIGHT_l: o.productImageLarge.height,
                SCALE_WIDTH_m: 500,
                SCALE_HEIGHT_m: 500,
                SCALE_QUALITY_m: 30,
                SCALE_WIDTH_ms: 200,
                SCALE_HEIGHT_ms: 200,
                SCALE_WIDTH_ml: 1000,
                SCALE_HEIGHT_ml: 1000,
                SCALE_QUALITY_ml: 30,
                SCALE_WIDTH_s: 100,
                SCALE_HEIGHT_s: 100,
                SCALE_WIDTH_h: 150,
                SCALE_HEIGHT_h: 150,
                SCALE_WIDTH_xs: 50,
                SCALE_HEIGHT_xs: 33,
                SCALE_NAME_m: 'ImageMedium',
                SCALE_NAME_ms: 'ImageMediumSmall',
                SCALE_NAME_ml: 'ImageMediumLarge',
                SCALE_NAME_s: 'ImageSmall',
                SCALE_NAME_h: 'ImageHotDeal'
            },
            optionsContainer = $('<div class="ep-uiUploadImage-Options" />'),
            useImageButton = $('<button class="de_epages-presentationUiUploader-button Disabled" disabled="disabled">{UseImage}</button>'),
            confirmation = $('<div class="DialogMessage MessageConfirm UploadImageConfirmation SmallTopMargin" style="display: none;"><p>{ImageIsUsed}</p></div>'),
            attributeSelect = $('<select size="20" class="FullWidth MaxWidth200" />'),
            left = $('<div class="Left FloatLeft MaxWidth200"><h4>1. {SelectAValue}</h4></div>'),
            right = $('<div class="Right FloatRight" />')
                .presentationUiUploadImage({
                    title: '2. {UploadANewImage}',
                    subtitle: '{UploadANewImageInfo}',
                    uploadButtonText: '{UploadImage}',
                    confirmation: '{ImageUploaded}'
                })
                .append(
                    '<h4>{UseMainProductImage}</h4><div class="BottomPadding">{UseMainProductImageExplanation}</div>',
                    '<div class="ep-uiUploadImage-Container"><img src="' + o.masterProductImage + '" alt="" /></div>',
                    optionsContainer.append(useImageButton, confirmation)
                ),
            dialog = $('<div class="LeftPaddingWide RightPaddingWide"><header class="BottomPadding TopPadding">{InfoText}</header></div>')
                .append(left, right);

        useImageButton.on('click', function () {
            if (optionSelected && valueID && attr) {
                $.ajax({
                    url: '?',
                    data: {
                        ChangeAction: 'JSONSetProductImageForSameVariations',
                        ObjectID: o.objectId,
                        Attribute: attr,
                        ValueID: valueID
                    },
                    dataType: 'json'
                })
                    .done(function () {
                        confirmation.fadeIn('slow').delay(4000).fadeOut('slow');
                    });
            }
        });

        attributeSelect.append(o.optgroup).on('change', function () {
            optionSelected = $(this).find('option:selected');
            if (optionSelected.length > 0) {
                valueID = optionSelected.val();
                attr = optionSelected.parent().data('alias');
                useImageButton.prop('disabled', false).removeClass('Disabled');

                right.presentationUiUploadImage('option', {
                    uploadData: $.extend(uploadData, {
                        Attribute: attr,
                        ValueID: valueID
                    }),
                    imagePath: null
                });
            } else {
                useImageButton.prop('disabled', true).addClass('Disabled');
                right.presentationUiUploadImage('option', {
                    uploadData: null,
                    imagePath: null
                });
            }
        }).appendTo(left);

        dialog.uiDialog({
            minWidth: 700,
            title: dict.translate('UploadImages'),
            modal: true,
            buttons: [{
                text: dict.translate('Close'),
                click: function () {
                    dialog.uiDialog('close');
                }
            }],
            beforeClose: function () {
                // reload from server, ignore cache
                // forceGet=false results in not opening the dialog. If someone knows why, give me a call.
                window.location.reload(true);
            }
        }).dictParse(dict, true);
    };
});