/*
 *  Copyright 2015 Anyware Services
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

/**
 * This helper is used to create a new skin by copy of another. See #open method for details.
 */
Ext.define("Ametys.plugins.web.skin.helper.CopySkinUI", {
    singleton: true,

    /**
     * @private
     * @property {Function} _cbFn Callback function to execute after copying the skin
     */

    /**
     * @private
     * @property {Ametys.window.DialogBox} _box The dialog box
     */

    /**
     * @private
     * @property {Ext.form.FormPanel} _formPanel The form of the dialog box
     */

    /**
     * Open the dialog box for copy
     * @param {String} [skinId] The id of skin used to generate the new skin. If omitted, this helper will let the user choose the skin to copy from a combobox.
     * @param {Function} [callback] The function to call when successful
     */
    open: function (skinId, callback)
    {
        this._cbFn = callback;

        this._delayedInitialize();

        this._box.show();
        this._initForm (skinId);
    },

    /**
     * Creates the dialog box
     * @private
     */
    _delayedInitialize: function ()
    {
        if (this._initialized)
        {
            return;
        }

        this._formPanel = this._createFormPanel();

        this._box = Ext.create('Ametys.window.DialogBox', {
            icon: Ametys.getPluginResourcesPrefix("web") + '/img/administrator/skins/copy_16.png',
            title: "{{i18n PLUGINS_WEB_ADMINISTRATOR_SKINS_HANDLE_COPY}}",
            
            width: 520,
            scrollable: false,

            items: [this._formPanel],

            closeAction: 'hide',
            defaultFocus: 'skinId',
            
            referenceHolder: true,
            defaultButton: 'validate',
            
            buttons: [{
            	reference: 'validate',
            	text :"{{i18n plugin.core-ui:PLUGINS_CORE_UI_FILEUPLOAD_BOX_OK}}",
                handler: Ext.bind(this._validate, this)
            }, {
            	text :"{{i18n plugin.core-ui:PLUGINS_CORE_UI_FILEUPLOAD_BOX_CANCEL}}",
                handler: Ext.bind(this._cancel, this)
            }]
        });

        this._initialized = true;
    },

    /**
     * Create the form panel
     * @return {Ext.form.FormPanel} the form panel
     * @private
     */
    _createFormPanel: function()
    {
        var formPanel = Ext.create('Ext.form.FormPanel', {
            defaultType: 'textfield',
            border: false,

            defaults: {
                cls: 'ametys',
                labelAlign: 'right',
                labelSeparator: '',
                labelWidth: 80,
                width: 470,
                msgTarget: 'side'
            },
            
            items: [
                {
                    xtype: 'component',
                    html: "{{i18n PLUGINS_WEB_ADMINISTRATOR_SKINS_HANDLE_COPY_HINT}}",
                    cls: 'a-text'
                },
                {
                    xtype: 'edition.select-skin',
                    itemId: 'originalSkinId',
                    allowCreation: false,
                    name: 'originalSkinId',
                    fieldLabel: "{{i18n PLUGINS_WEB_ADMINISTRATOR_SKINS_HANDLE_COPY_SKIN}} *",
                    ametysDescription: "{{i18n PLUGINS_WEB_ADMINISTRATOR_SKINS_HANDLE_COPY_SKIN_DESC}}",
                    hidden: true,
                    validator: function (val) {
                        return (this.isHidden() || val.length > 0) ? true : "{{i18n plugin.core-ui:PLUGINS_CORE_UI_DEFAULT_VALIDATOR_MANDATORY}}";
                    }
                },
                {
                    name: 'skinId',
                    itemId: 'skinId',
                    fieldLabel: "{{i18n PLUGINS_WEB_ADMINISTRATOR_SKINS_HANDLE_COPY_SKIN_NAME}} *",
                    ametysDescription: "{{i18n PLUGINS_WEB_ADMINISTRATOR_SKINS_HANDLE_COPY_SKIN_NAME_DESC}}",
                    allowBlank: false,
                    regex: /^[0-9a-z_-]+$/
                }
            ]

        });

        return formPanel;
    },

    /**
     * Initialize the form
     * @param {String} [skinId] The id of skin used to generate the new skin. If omitted, this helper will let the user choose from a combobox.
     * @private
     */
    _initForm: function (skinId)
    {
        var form = this._formPanel.getForm();
        form.findField('skinId').setValue("");

        form.findField('originalSkinId').setVisible(skinId == null);
        form.findField('originalSkinId').setValue(skinId);
        
        form.clearInvalid();
    },

   /**
    * Handler for the 'Ok' button of the dialog box.
    * Copy the skin.
    * @private
    */
    _validate: function ()
    {
        var form = this._formPanel.getForm();
        if (!form.isValid())
        {
            return;
        }

        var skinId = form.findField('skinId').getValue();
        var originalSkinId = form.findField('originalSkinId').getValue();
        
        Ametys.plugins.web.skin.SkinDAO.copySkin([skinId, originalSkinId], Ext.bind(this._copySkinCb, this), {
            waitMessage: {
                target: this._box
            }
        });
    },

    /**
     * Callback for the "cancel" button of the dialog. Close the dialog.
     * @private
     */
    _cancel: function ()
    {
        this._box.hide();
    },

    /**
     * Callback after the new skin was successfully copied.
     * @param {String} error The error code in case of failure. Null in case of success.
     * @private
     */
    _copySkinCb: function (error)
    {
        if (!error)
        {
            this._box.hide();
            if (Ext.isFunction(this._cbFn))
            {
                this._cbFn();
            }
        }
    }

});