/**
 * A basic title component for a Panel Header.
 *
 * @since 6.0.1
 */
Ext.define('Ext.panel.Title', {
    extend: 'Ext.Component',
    xtype: 'paneltitle',
 
    isPanelTitle: true,
 
    // For performance reasons we give the following configs their default values on
    // the class body.  This prevents the updaters from running on initialization in the
    // default configuration scenario
 
    _textAlign: 'left',
    _iconAlign: 'left',
    _text: ' ',
 
    cachedConfig: {
        /**
         * @cfg [textAlign='left']
         * @inheritdoc Ext.panel.Header#cfg-titleAlign
         * @accessor
         */
        textAlign: null,
 
        /**
         * @cfg {String} 
         * The title's text (can contain html tags/entities)
         * @accessor
         */
        text: null,
 
        /**
         * @cfg glyph
         * @inheritdoc Ext.panel.Header#cfg-glyph
         * @accessor
         */
        glyph: null,
 
        /**
         * @cfg icon
         * @inheritdoc Ext.panel.Header#cfg-icon
         * @accessor
         */
        icon: null,
 
        /**
         * @cfg {'top'/'right'/'bottom'/'left'} [iconAlign='left']
         * alignment of the icon
         * @accessor
         */
        iconAlign: null,
 
        /**
         * @cfg iconCls
         * @inheritdoc Ext.panel.Header#cfg-iconCls
         * @accessor
         */
        iconCls: null
    },
 
    weight: -10,
 
    element: {
        unselectable: 'on',
        reference: 'element',
        cls: Ext.baseCSSPrefix + 'panel-title-align-left',
 
        children: [{
            reference: 'iconElement',
            style: 'display:none',
            cls: Ext.baseCSSPrefix + 'panel-title-icon ' +
                Ext.baseCSSPrefix + 'panel-title-icon-left'
        }, {
            reference: 'textElement',
            cls: Ext.baseCSSPrefix + 'panel-title-text'
        }]
    },
 
    _textAlignClasses: {
        left: Ext.baseCSSPrefix + 'panel-title-align-left',
        center: Ext.baseCSSPrefix + 'panel-title-align-center',
        right: Ext.baseCSSPrefix + 'panel-title-align-right'
    },
 
    _iconAlignClasses: {
        top: Ext.baseCSSPrefix + 'panel-title-icon-top',
        right: Ext.baseCSSPrefix + 'panel-title-icon-right',
        bottom: Ext.baseCSSPrefix + 'panel-title-icon-bottom',
        left: Ext.baseCSSPrefix + 'panel-title-icon-left'
    },
 
    baseCls: Ext.baseCSSPrefix + 'panel-title',
    _titleSuffix: '-title',
    _glyphCls: Ext.baseCSSPrefix + 'panel-title-glyph',
    _verticalCls: Ext.baseCSSPrefix + 'panel-title-vertical',
 
    applyText: function (text) {
        return text || ' ';
    },
 
    updateGlyph: function(glyph, oldGlyph) {
        glyph = glyph || 0;
 
        var me = this,
            glyphCls = me._glyphCls,
            iconEl = me.iconElement,
            fontFamily, glyphParts;
 
        me.glyph = glyph;
 
        me._syncIconVisibility();
 
        if (typeof glyph === 'string') {
            glyphParts = glyph.split('@');
            glyph = glyphParts[0];
            fontFamily = glyphParts[1] || Ext._glyphFontFamily;
        }
 
        if (!glyph) {
            iconEl.dom.innerHTML = '';
            iconEl.removeCls(glyphCls);
        } else {
            iconEl.dom.innerHTML = '&#' + glyph + ';';
            iconEl.addCls(glyphCls);
        }
 
        if (fontFamily) {
            iconEl.setStyle('font-family', fontFamily);
        }
    },
 
    updateIcon: function(icon, oldIcon) {
        var me = this,
            iconEl;
 
        me._syncIconVisibility();
        iconEl = me.iconElement;
 
        iconEl.setStyle('background-image', icon ? 'url(' + icon + ')': '');
    },
 
    updateIconAlign: function(align, oldAlign) {
        var me = this,
            iconEl = me.iconElement,
            iconAlignClasses = me._iconAlignClasses,
            el = me.el;
 
        if (oldAlign) {
            iconEl.removeCls(iconAlignClasses[oldAlign]);
        }
 
        iconEl.addCls(iconAlignClasses[align]);
 
        // here we move the icon to the correct position in the dom - before the
        // title el for top/left alignments, and after the title el for right/bottom
        if (align === 'top' || align === 'left') {
            el.insertFirst(iconEl);
        } else {
            el.appendChild(iconEl);
        }
 
        if (align === 'top' || align === 'bottom') {
            el.addCls(me._verticalCls);
        } else {
            el.removeCls(me._verticalCls);
        }
    },
 
    updateIconCls: function(cls, oldCls) {
        var iconEl = this.iconElement;
 
        this._syncIconVisibility();
 
        if (oldCls) {
            iconEl.removeCls(oldCls);
        }
 
        if (cls) {
            iconEl.addCls(cls);
        }
    },
 
    updateText: function(text) {
        this.textElement.setHtml(text);
    },
 
    updateTextAlign: function(align, oldAlign) {
        var me = this,
            textAlignClasses = me._textAlignClasses;
 
        if (oldAlign) {
            me.removeCls(textAlignClasses[oldAlign]);
        }
 
        me.addCls(textAlignClasses[align]);
    },
 
    privates: {
        _getVerticalAdjustDirection: function() {
            // rtl hook
            return 'left';
        },
 
        _hasIcon: function() {
            return !!(this.getIcon() || this.getIconCls() || this.getGlyph());
        },
 
        _syncIconVisibility: function() {
            this.iconElement.setDisplayed(this._hasIcon());
        }
    }
});