(function(){
    var Ext = window.Ext4 || window.Ext;

    /**
     * @private
     * A badge with styling for Rally.  Common use is with new pages to be displayed next the page title.  Will respond
     * to a toolTipPreferenceKey to determine if the tooltip should be rendered by default when the badge is rendered.
     *
     * # Example usage:
     *      var badge = Ext.create('Rally.ui.badge.Badge',{
     *          type:'new',
     *          badgeText:'NEW - GIVE FEEDBACK',
     *          toolTipConfig:{
     *              heading:"We've improved the foo so that it:",
     *              text:"<ul>" +
     *                   "<li>Allows you to foo faster</li>" +
     *                   "</ul><br />",
     *              helpId: 1,
     *              demoVideoId: 1
     *              feedback: {
     *                  dialog: {
     *                      title: 'My feedback title',
     *                      text: 'My text'
     *                  }
     *              },
     *              optout: {
     *                  handler: Ext.bind(this._optOutHandler,this)
     *              }
     *          }
     *      });
     */
    Ext.define('Rally.ui.badge.Badge', {
        extend: 'Ext.Component',
        mixins: {
            toolTippable: 'Rally.ui.tooltip.ToolTippable'
        },
        alias: 'widget.rallybadge',

        renderTpl: Ext.create('Ext.XTemplate',
                              '<div class="rly-badge {type}">',
                              '<div class="badge-l"><div class="badge-r"><div class="badge-m">{badgeText}</div></div></div>',
                              '</div>'),
        renderSelectors: {
            badgeEl: 'div.rly-badge'
        },

        config : {
            /**
             * @cfg {String} type
             * The type of badge, defaults to "new".  Will also be used as the text of the badge if not badgeText is
             * specified.
             */
            type : 'new',
            /**
             * @cfg {String} badgeText
             * Text to be displayed in the badge
             */
            badgeText : undefined,
            /**
             * @cfg {String}
             * The class of tooltip to create.
             */
            toolTipType: 'Rally.ui.badge.BadgeToolTip',
            /**
             * @cfg {Object} toolTipConfig
             * Config to be applied to the Rally.ui.badge.BadgeToolTip if one is to be created.  If this is
             * not defined there will be no tool tip.
             */
            toolTipConfig: undefined,
            /**
             * @cfg {String} toolTipPreferenceKey
             * Name of preference that is used to determine if the ToolTip will be displayed when the badge loads.  The
             * value will be set to false after closing the tool tip and will no longer appear by default.
             */
            toolTipPreferenceKey: undefined
        },

        /**
         * @constructor
         */
        constructor : function(config) {
            this.initConfig(config);

            this.renderData = {
                type : this.type,
                badgeText : this.badgeText ? this.badgeText : this.type.toUpperCase()
            };

            this.callParent(arguments);
        },

        getToolTipTargetEl: function() {
            return this.badgeEl.dom;
        },

        onDestroy : function() {
            this.callParent();

            if(this.toolTip) {
                Ext.destroy(this.toolTip);
            }
        },

        onRender : function() {
            this.callParent(arguments);
            if (this.toolTipText) {
                this.toolTipConfig = {
                    html: '<div class="tooltip-text">' + this.toolTipText + '</div>',
                    anchor: 'top',
                    showDelay: 0
                };
                this.buildToolTip();
            } else if (this.toolTipConfig) {
                this.toolTipConfig = Ext.applyIf(this.toolTipConfig, {showDelay: 0});
                this.buildToolTip();
            }
        }
    });
})();