/*
 *  Copyright 2013 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 class controls a button for the HTML expert edition box. See {@link Ametys.plugins.cms.editor.HTMLExpert#edit}.
 * It can call a configured function when pressed.
 * 
 * @private
 */
Ext.define('Ametys.plugins.cms.editor.htmlexpert.HTMLExpertToolbarButton', {
    
    /**
     * @auto
     * @cfg {String} id (required) The unique identifier for the tool. Cannot be null.
     */
    /**
     * @property {String} _id See {@link #cfg-id}
     * @private
     */
    
    /**
     * @auto
     * @cfg {String} pluginName (required) The name of the plugin that declared the tool. Cannot be null.
     */
    /**
     * @property {String} _pluginName See {@link #cfg-pluginName}
     * @private
     */
    
    /**
     * @cfg {Boolean/String} disabled If 'true' the button is created disabled
     */
    /**
     * @property {Boolean} _disabled The current disabled state for a button
     * @private
     */

    /**
     * @cfg {String} label The main text of the button (and the tooltip header)
     */
    /**
     * @cfg {String} description The main description text for tooltip
     */
    /**
     * @property {String} _description See #cfg-description
     * @private
     */
    /**
     * @cfg {String} description-footer The description footer for tooltip
     */
    /**
     * @property {String} _descriptionFooter See #cfg-description-footer
     * @private
     */
    /**
     * @cfg {String} icon-small The path to the icon of the button in size 16x16 pixels. Used for button in small size (and tooltip if no bigger image is available).
     */
    /**
     * @property {String} _iconSmall See #cfg-icon-small
     * @private
     */
    /**
     * @cfg {String} icon-medium The path to the icon of the button in size 32x32 pixels. Used for button in large size (and tooltip if no bigger image is available).
     */
    /**
     * @property {String} _iconMedium See #cfg-icon-medium
     * @private
     */
    /**
     * @cfg {String} icon-large The path to the icon of the button in size 48x48 pixels. Used for button's tooltip.
     */
    /**
     * @property {String} _iconLarge See #cfg-icon-large
     * @private
     */
    
    constructor: function (config)
    {
        this.initConfig(config);
        
        this._id = config.id;
        this._pluginName = config.pluginName;
        
        this._description = this.getInitialConfig("description") || this.getInitialConfig("default-description");
        this._iconGlyph = this.getInitialConfig("icon-glyph");
        this._iconSmall = this.getInitialConfig("icon-small");
        this._iconMedium = this.getInitialConfig("icon-medium");
        this._iconLarge = this.getInitialConfig("icon-large");
        this._disabled = this.getInitialConfig("disabled") == true || this.getInitialConfig("disabled") == 'true';
    },
    
    /**
     * Get the identifier of the element provided.
     * @returns {String} The identifier of the element. Cannot be null.
     */
    getId: function()
    {
        return this._id;
    },
    
    /**
     * Get the name of the plugin that defined this element.
     * @returns {String} The name of the plugin. Cannot be null.
     */
    getPluginName: function()
    {
        return this._pluginName;
    },
    
    /**
     * This methods creates a ui for the toolbar
     * @returns {Ext.Button/Ext.form.field.Field/Ext.Component} A ui that can takes place in the toolbar
     * @template
     * @protected
     */
    createUI: function ()
    {
        var element = Ext.create("Ext.Button",{
            text: this.getInitialConfig("label"),
            
            iconCls: this._iconGlyph,
            icon: this._iconGlyph ? null : Ametys.CONTEXT_PATH + this._iconSmall,
            tooltip: this._getTooltip(),
            
            handler: Ext.bind(this.onPress, this),
            disabled: this._disabled,
            controlId: this.getId()
        });
        
        return element;
    },
    
    /**
     * Get the tooltip configuration
     * @returns {Object} The tooltip configuration. See Ametys.ui.fluent.Tooltip.
     * @private
     */
    _getTooltip: function()
    {
        return {
            title: this.getInitialConfig("label"),
            glyphIcon: this._iconGlyph,
            image: this._iconGlyph ? null : Ametys.CONTEXT_PATH + (this._iconLarge || this._iconMedium || this._iconSmall),
            text: this._description,
            inribbon: false
        };
    },
    
    /**
     * Handler for the button. The default behavior is to call the function defined in #cfg-action
     * @param {Ametys.ui.fluent.ribbon.controls.Button} button The pressed button
     * @param {Boolean} state When the button is a toggle button, the new press-state of the button
     * @protected
     */
    onPress: function(button, state)
    {
        if (this.getLogger().isInfoEnabled())
        {
            this.getLogger().info("Pressing button " + this.getId() + "");
        }
        
        var actionFn = this.getInitialConfig("action");
        if (actionFn)
        {
            if (this.getLogger().isDebugEnabled())
            {
                this.getLogger().debug("Calling action for button " + this.getId() + ": " + actionFn);
            }
            
            Ametys.executeFunctionByName(actionFn, null, null, this, null);
        }
    }
});