/**
 * This class encapsulates a drawn text item as rendered by the Ext.draw package within a Component which can be
 * then used anywhere in an ExtJS application just like any other Component.
 *
 * ## Example usage
 *
 *     @example
 *     Ext.create('Ext.panel.Panel', {
 *         title: 'Panel with VerticalTextItem',
 *         width: 300,
 *         height: 200,
 *         lbar: {
 *             layout: {
 *                 align: 'center'
 *             },
 *             items: [{
 *                 xtype: 'text',
 *                 text: 'Sample VerticalTextItem',
 *                 degrees: 90
 *             }]
 *         },
 *         renderTo: Ext.getBody()
 *     });
 *
 * @constructor
 * Creates a new Text Component
 * @param {Object} text A config object containing a `text` property, a `degrees` property,
 * and, optionally, a `styleSelector` property which specifies a selector which provides CSS rules to
 * give font family, size and color to the drawn text.
 */
Ext.define('Ext.draw.Text', {
    extend: 'Ext.draw.Component',
    uses: ['Ext.util.CSS'],
    alias: 'widget.text',

    /**
     * @cfg {String} text
     * The text to display (html tags are <b>not</b> accepted)
     */
    text: '',

    /**
     * @cfg {String} styleSelector
     * A CSS selector string which matches a style rule in the document stylesheet from which
     * the text's font properties are read.
     *
     * **Drawn** text is not styled by CSS, but by properties set during its construction, so these styles
     * must be programatically read from a stylesheet rule found via a selector at construction time.
     */

    /**
     * @cfg {Number} degrees
     * The angle by which to initially rotate the text clockwise. Defaults to zero.
     */

    focusable: false,
    viewBox: false,
    autoSize: true,
    baseCls: Ext.baseCSSPrefix + 'surface ' + Ext.baseCSSPrefix + 'draw-text',

    initComponent: function() {
        var me = this;

        me.textConfig = Ext.apply({
            type: 'text',
            text: me.text,
            rotate: {
                degrees: me.degrees || 0
            }
        }, me.textStyle);
        Ext.apply(me.textConfig, me.getStyles(me.styleSelectors || me.styleSelector));

        // Surface is created from the *initialConfig*, not the current object state,
        // So the generated items must go into the initialConfig
        me.initialConfig.items = [me.textConfig];
        me.callParent(arguments);
    },

    /**
     * @private
     * Accumulates a style object based upon the styles specified in document stylesheets
     * by an array of CSS selectors
     */
    getStyles: function(selectors) {
        selectors = Ext.Array.from(selectors);
        var i = 0,
            len = selectors.length,
            rule,
            style,
            prop,
            result = {};

        for (; i < len; i++) {
            // Get the style rule which exactly matches the selector.
            rule = Ext.util.CSS.getRule(selectors[i]);
            if (rule) {
                style = rule.style;
                if (style) {
                    Ext.apply(result, {
                        'font-family': style.fontFamily,
                        'font-weight': style.fontWeight,
                        'line-height': style.lineHeight,
                        'font-size': style.fontSize,
                        fill: style.color
                    });
                }
            }
        }
        return result;
    },

    /**
     * Sets the clockwise rotation angle relative to the horizontal axis.
     * @param {Number} degrees The clockwise angle (in degrees) from the horizontal axis
     * by which the text should be rotated.
     */
    setAngle: function(degrees) {
        var me = this,
            surface,
            sprite;
            
        if (me.rendered) {
            surface = me.surface;
            sprite = surface.items.items[0];

            me.degrees = degrees;
            sprite.setAttributes({
                rotate: {
                    degrees: degrees
                }
            }, true);
            if (me.autoSize || me.viewBox) {
                me.updateLayout();
            }
        } else {
            me.degrees = degrees;
        }
    },

    /**
     * Updates this item's text.
     * @param {String} t The text to display (html **not** accepted).
     */
    setText: function(text) {
        var me = this,
            surface,
            sprite;
            
        if (me.rendered) {
            surface = me.surface;
            sprite = surface.items.items[0];

            me.text = text || '';
            surface.remove(sprite);
            me.textConfig.type = 'text';
            me.textConfig.text = me.text;
            sprite = surface.add(me.textConfig);
            sprite.setAttributes({
                rotate: {
                    degrees: me.degrees
                }
            }, true);
            if (me.autoSize || me.viewBox) {
                me.updateLayout();
            }
        } else {
            me.on({
                render: function() {
                    me.setText(text);
                },
                single: true
            });
        }
    }
});