/**
 * Attach simpledialog with a form with some email inputs as its content to the selected set of elements.
 *
 * The `de_epages.shopmailtypeUiEditmailaddress()` attaches simpledialog with a form with some email inputs as its content to the selected set of elements.
 *
 * ### Examples
 * Attach shopmailtypeUiEditmailaddress to edit button passing along some options in data attribute.
 *
 * JavaScript:
 *
 *     de_epages('#ep-edit-FROM').shopmailtypeUiEditmailaddress();
 *
 * HTML:
 *
 *     <input class="ep-width-70p Disabled-Edit" type="text" value="&quot;TTester&quot; &lt;ttester@epages.com&gt;" name="FROM" readonly="readonly">
 *     <span class="CommandLinkSmall" id="ep-edit-FROM" data-de_epages-shopmailtype-ui-editmailaddress="{&quot;name&quot; : &quot;FROM&quot;, &quot;data&quot;:{&quot;FROM&quot;:[{&quot;email&quot;:&quot;ttester@epages.com&quot;,&quot;name&quot;:&quot;TTester&quot;}]},&quot;multiple&quot;:false,&quot;showSetDefault&quot;:true,&quot;wording&quot;:{&quot;setDefault&quot;:&quot;Use This Address As Default Sender&quot;,&quot;email&quot;:&quot;E-mail address&quot;,&quot;name&quot; : &quot;Name&quot;, &quot;deleteMail&quot; : &quot;Delete&quot;, &quot;addMail&quot; : &quot;Add Email Address&quot;,&quot;apply&quot;:&quot;Apply&quot;}}"><span><span class="WithIcon Edit">Edit</span></span></span>
 *
 *
 * @class jQuery.ui.shopmailtypeUiEditmailaddress
 * @extends jQuery.widget
 *
 * @uses jQuery.ui.widget
 * @uses de_epages
 * @uses ep.ui.simpledialog
 * @uses ep.ui.validate
 * @uses ep.ui.input
 * @since 6.15.0
 */

/**
 * @cfg {Boolean} [multiple] Allow multiple e-mail addresses to be entered.
 */

/**
 * @cfg {String} [name] Name of the associated input. $('input[name="' + name + '"]')
 */

/**
 * @cfg {String} [showSetDefault] If true, there is a checkbox inside the dialog. When the checkbox is checked and apply is clicked, the entered e-mail address data is ajaxed over to the server.
 */

/**
 * @cfg {Object} wording Wording for the dialog. See example.
 */

/**
 * @cfg {Object} data E-mail data for the dialog. There has to be a key (named as the option name) which holds an array of objects with keys "email" and "name"
 */

/**
 * See `jQuery.ui.shopmailtypeUiEditmailaddress` for details.
 *
 * @param {Object} options A map of additional options pass to the method.
 * @param {Boolean} [multiple] Allow multiple e-mail addresses to be entered.
 * @param {String} [name] Name of the associated input. $('input[name="' + name + '"]')
 * @param {String} [showSetDefault] If true, there is a checkbox inside the dialog. When the checkbox is checked and apply is clicked, the entered e-mail address data is ajaxed over to the server.
 * @param {Object} wording Wording for the dialog. See example.
 * @param {Object} data E-mail data for the dialog. There has to be a key (named as the option name) which holds an array of objects with keys "email" and "name"
 *
 * @method shopmailtypeUiEditmailaddress
 * @member jQuery
 *
 * @since 6.15.0
 */

/*jslint nomen: true*/
/*global define*/
define('de_epages/shopmailtype/ui/editmailaddress', [
    'jquery',
    'ep',
    'de_epages',
    '$tmpl!./editmailaddress',

    'jquery/ui/widget',
    'ep/ajax',
    'ep/ui/simpledialog',
    'ep/ui/validate',
    'ep/ui/input'
], function ($, ep, de_epages, tmplEditMailadress) {
    'use strict';

    // Widget.
    $.widget('ui.shopmailtypeUiEditmailaddress', {

        options: {
            wording: {},
            data: {
                'dummy': []
            },
            name: 'dummy',
            multiple: true,
            showSetDefault: false
        },

        _create: function () {
            var self = this,
                o = self.options;

            // Merge in options from data attribute.
            $.extend(true, o, $.parseJSON(self.element.attr('data-de_epages-shopmailtype-ui-editmailaddress') || "null"));

            // Set corresponding input element.
            if (!o.name) {
                return self.destroy();
            }

            self.input = $('input[name="' + o.name + '"]');

            // Render template.
            self.content = $('<form>').append(tmplEditMailadress(o.data[o.name].length ? o.data[o.name] : [{}], {
                wording: o.wording
            }));
            // Init delete event listeners.
            self.content.on('click', '.icon-remove', $.proxy(self, '_deleteMail'));

            // Init *uiValidate* and *uiInput*.
            $(self.content.find('input[type="email"]')).uiValidate({
                type: 'email'
            });
            $(self.content.find('input[type="text"]')).uiInput();

            // Add footer.
            // i.e. *setDefault* checkbox or *addMail* button.
            self.footer = $('<footer>');
            if (o.multiple) {
                $('<span  style="padding-left:158px;" class="DisplayBlock PseudoLink CursorPointer">').text(o.wording.addMail).on('click', $.proxy(self, '_addMail')).appendTo(self.footer);
            } else {
                if (o.showSetDefault) {
                    // Init and render template.
                    if (!$.template['de_epages.shopmailtype.inc.setdefault']) {
                        $.template('de_epages.shopmailtype.inc.setdefault', '<div class="InputRow">' + '<input type="checkbox" name="setdefault" id="setdefault"/>' + '<label class="InputLabellingXWide AlignLeft" for="setdefault">${$item.wording.setDefault}</label>' + '</div>');
                    }

                    self.setDefault = $.tmpl('de_epages.shopmailtype.inc.setdefault', {}, {
                        wording: o.wording
                    }).appendTo(self.footer).find('input[type="checkbox"]').uiInput();
                }
            }

            // Init *uiSimpleDialog*.
            self.element = $(self.element).uiSimpledialog({
                content: [self.content[0], self.footer[0]],
                buttons: [{
                    text: o.wording.apply,
                    callback: function () {
                        if (self.content.find('input[type="email"]:invalid').length) {
                            $(self.content.find('input[type="email"]:invalid')).trigger('validate.uiValidate');
                        } else {
                            self._apply();
                            self._close();
                        }
                    }
                }]
            });
        },

        _deleteMail: function (event) {
            event.stopPropagation();
            // Otherwise *self.dialog._close()* is called, since
            // the click was fired by an element which at that point
            // is no longer part of the dialog.
            $(event.target).parent().next().remove();
            $(event.target).parent().remove();
        },

        _addMail: function () {
            var self = this,
                o = self.options,
                inputrow = tmplEditMailadress({}, {
                    wording: o.wording
                });

            // Init *uiValidate* and *uiInput*.
            $(inputrow.find('input[type="email"]')).uiValidate({
                type: 'email'
            });
            $(inputrow.find('input[type="text"]')).uiInput();

            inputrow.appendTo(self.content);
        },

        _apply: function () {
            var self = this,
                o = self.options,
                value = '',
                inputs = self.content.find('input[type="text"], input[type="email"]'),
                names = inputs.filter('[type="text"]'),
                name = '',
                doajax = self.setDefault && self.setDefault.is(':checked');

            // Let us add all those emails and names together.
            inputs.filter('[type="email"]').each(function (index, email) {
                email = email.value;
                name = names[index].value;
                // Set default Sender Address, if the checkbox is checked.
                if ((index === 0) && doajax) {
                    ep.ajax({
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            'DefaultEmail': email,
                            'DefaultName': name,
                            'ViewAction': 'JSONViewResponse',
                            'ChangeAction': 'JSONMakeDefaultSender',
                            'ObjectID': ep.config.objectId
                        }
                    });
                }
                value = value + (value ? ';' : '') + name + (name ? ' <' : '') + email + (name ? '>' : '');
            });

            // Output email string into input.
            self.input.val(value);
        },

        _close: function () {
            this.element.uiSimpledialog('close');
        },

        destroy: function () {
            var self = this;
            if (self.content) {
                self.content.remove();
            }
            self.element.uiSimpledialog('destroy');
            self._superApply(arguments);
        }

    });

    return de_epages;

});