/**
 * {@link Ext.Toolbar}s are most commonly used as docked items as within a {@link Ext.Container}.
 * They can be docked either `top` or `bottom` using the {@link #docked} configuration.
 *
 * They allow you to insert items (normally {@link Ext.Button buttons}) and also add a
 * {@link #title}.
 *
 * The {@link #defaultType} of {@link Ext.Toolbar} is {@link Ext.Button}.
 *
 * You can alternatively use {@link Ext.TitleBar} if you want the title to automatically adjust the
 * size of its items.
 *
 * ## Examples
 *
 * ```javascript
 * @example({ framework: 'extjs' })
 *     Ext.create('Ext.Container', {
 *         fullscreen: true,
 *         layout: {
 *             type: 'vbox',
 *             pack: 'center'
 *         },
 *         items: [
 *             {
 *                 xtype : 'toolbar',
 *                 docked: 'top',
 *                 title: 'My Toolbar'
 *             },
 *             {
 *                 xtype: 'container',
 *                 defaults: {
 *                     xtype: 'button',
 *                     margin: '10 10 0 10'
 *                 },
 *                 items: [
 *                     {
 *                         text: 'Toggle docked',
 *                         handler: function() {
 *                             var toolbar = Ext.ComponentQuery.query('toolbar')[0],
 *                                 newDocked = (toolbar.getDocked() === 'top') ? 'bottom' : 'top';
 *
 *                             toolbar.setDocked(newDocked);
 *                         }
 *                     },
 *                     {
 *                         text: 'Toggle UI',
 *                         handler: function() {
 *                             var toolbar = Ext.ComponentQuery.query('toolbar')[0],
 *                                 newUi = (toolbar.getUi() === 'light') ? 'dark' : 'light';
 *
 *                             toolbar.setUi(newUi);
 *                         }
 *                     },
 *                     {
 *                         text: 'Change title',
 *                         handler: function() {
 *                             var toolbar = Ext.ComponentQuery.query('toolbar')[0],
 *                                 titles = ['My Toolbar', 'Ext.Toolbar',
 *                                          'Configurations are awesome!', 'Beautiful.'],
                                   // internally, the title configuration gets converted into a
                                   // {@link Ext.Title} component,
                                   // so you must get the title configuration of that component
 *                                 title = toolbar.getTitle().getTitle(),
 *                                 newTitle = titles[titles.indexOf(title) + 1] || titles[0];
 *
 *                             toolbar.setTitle(newTitle);
 *                         }
 *                     }
 *                 ]
 *             }
 *         ]
 *     });
 * ```
 *
 * ```html
 * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 })
 * <ext-panel shadow bodyPadding=0>
 *     <ext-toolbar docked="top">
 *         <ext-button text="Default" badgeText="2">
 *         </ext-button>
 *         <ext-spacer>
 *             <ext-segmentedbutton>
 *                 <ext-button text="Option 1" pressed></ext-button>
 *                 <ext-button text="Option 2"></ext-button>
 *             </ext-segmentedbutton>
 *         </ext-spacer>
 *         <ext-button ui="action" text="Action">
 *         </ext-button>
 *     </ext-toolbar>
 *     Some Text!
 * </ext-panel>
 * ```
 * ```javascript
 * @example({framework: 'ext-web-components', tab: 2, packages: ['ext-web-components']})
 *
 * import '@sencha/ext-web-components/dist/ext-toolbar.component';
 * import '@sencha/ext-web-components/dist/ext-button.component';
 * import '@sencha/ext-web-components/dist/ext-spacer.component';
 * import '@sencha/ext-web-components/dist/ext-segmentedbutton.component';
 * import '@sencha/ext-web-components/dist/ext-panel.component';
 *  
 * export default class ToolbarComponent {} 
 * ```
 * 
 * ```javascript
 * @example({framework: 'ext-react', packages:['ext-react']})
 * import React, { Component } from 'react';
 * import { ExtToolbar, ExtPanel, ExtButton, ExtSegmentedButton, ExtSpacer, ExtSearchField }
 *    from '@sencha/ext-react';
 *
 *  export default class MyExample extends Component {
 *      render() {
 *          return (
 *              <ExtPanel shadow bodyPadding={0}>
 *                  <ExtToolbar docked="top">
 *                      <ExtButton text="Default" badgeText="2"/>
 *                      <ExtSpacer/>
 *                      <ExtSegmentedButton>
 *                          <ExtButton text="Option 1" pressed/>
 *                          <ExtButton text="Option 2"/>
 *                      </ExtSegmentedButton>
 *                      <ExtSpacer/>
 *                      <ExtButton ui="action" text="Action"/>
 *                  </ExtToolbar>
 *                 Some Text!
 *              </ExtPanel>
 *          )
 *      }
 *  }
 * ```
 * 
 * ```javascript
 * @example({framework: 'ext-angular', packages:['ext-angular']})
 *  import { Component } from '@angular/core'
 *  declare var Ext: any;
 *
 *  @Component({
 *      selector: 'app-root-1',
 *      styles: [`
 *              `],
 *      template: `
 *          <ExtToolBar docked="top">
 *              <ExtButton text="Default" badgeText="2"></ExtButton>
 *              <ExtSpacer></ExtSpacer>
 *              <ExtSegmentedButton>
 *                  <ExtButton text="Option 1" pressed="true"></ExtButton>
 *                  <ExtButton text="Option 2"></ExtButton>
 *              </ExtSegmentedButton>
 *              <ExtSpacer> </ExtSpacer>
 *              <ExtButton ui="action" text="Action"></ExtButton>
 *          </ExtToolBar>
 *              `
 *  })
 *  export class AppComponent {
 *  }
 * ```
 * ## Notes
 *
 * You must use a HTML5 doctype for {@link #docked} `bottom` to work. To do this, simply add the
 * following code to the HTML file:
 *
 *     <!doctype html>
 *
 * So your index.html file should look a little like this:
 *
 *     <!doctype html>
 *     <html>
 *         <head>
 *             <title>MY application title</title>
 *             ...
 *
 */
Ext.define('Ext.Toolbar', {
    extend: 'Ext.Container',
    xtype: 'toolbar',
 
    requires: [
        'Ext.Button',
        'Ext.Title',
        'Ext.Spacer',
        'Ext.layout.Box'
    ],
 
    /**
     * @private
     */
    isToolbar: true,
 
    config: {
        /**
         * @cfg {String/Ext.Title} title
         * The title of the toolbar.
         * @accessor
         */
        title: null,
 
        /**
         * @cfg {String} defaultType
         * The default xtype to create.
         * @accessor
         */
        defaultType: 'button',
 
        /**
         * @cfg {String} 
         * A default {@link Ext.Component#ui ui} to use for {@link Ext.Button Button} items.
         */
        defaultButtonUI: null,
 
        /**
         * @cfg {String} docked
         * The docked position for this {@link Ext.Toolbar}.
         * If you specify `left` or `right`, the {@link #layout} configuration will automatically
         * change to a `vbox`. It's also recommended to adjust the {@link #width} of the toolbar if
         * you do this.
         * @accessor
         */
 
        /**
         * @cfg {Number/String} minHeight
         * The minimum height height of the Toolbar.
         * @accessor
         */
        minHeight: null,
 
        /**
         * @cfg {Object/String} layout Configuration for this Container's layout. Example:
         *
         *     Ext.create('Ext.Container', {
         *         layout: {
         *             type: 'hbox',
         *             align: 'middle'
         *         },
         *         items: [
         *             {
         *                 xtype: 'panel',
         *                 flex: 1,
         *                 style: 'background-color: red;'
         *             },
         *             {
         *                 xtype: 'panel',
         *                 flex: 2,
         *                 style: 'background-color: green'
         *             }
         *         ]
         *     });
         *
         * __Note:__ If you set the {@link #docked} configuration to `left` or `right`, the default
         * layout will change from the `hbox` to a `vbox`.
         *
         * @accessor
         */
        layout: {
            type: 'box',
            align: 'center'
        }
    },
 
    statics: {
        shortcuts: {
            '->': true
        }
    },
 
    autoSize: null,
 
    border: false,
 
    classCls: Ext.baseCSSPrefix + 'toolbar',
 
    constructor: function(config) {
        config = config || {};
 
        if (config.docked === 'left' || config.docked === 'right') {
            config.layout = Ext.apply({
                type: 'box',
                align: 'stretch',
                vertical: true
            }, config.layout);
        }
 
        this.callParent([config]);
    },
 
    /**
     * @private
     */
    applyTitle: function(title) {
        if (typeof title === 'string') {
            title = {
                title: title,
                centered: true
            };
        }
 
        return Ext.factory(title, Ext.Title, this.getTitle());
    },
 
    /**
     * @private
     */
    updateTitle: function(newTitle, oldTitle) {
        if (newTitle) {
            this.add(newTitle);
        }
 
        if (oldTitle) {
            oldTitle.destroy();
        }
    },
 
    /**
     * Shows the title, if it exists.
     */
    showTitle: function() {
        var title = this.getTitle();
 
        if (title) {
            title.show();
        }
    },
 
    /**
     * Hides the title, if it exists.
     */
    hideTitle: function() {
        var title = this.getTitle();
 
        if (title) {
            title.hide();
        }
    },
 
    /**
     * Returns an {@link Ext.Title} component.
     * @member Ext.Toolbar
     * @method getTitle
     * @return {Ext.Title} 
     */
 
    /**
     * Use this to update the {@link #title} configuration.
     * @member Ext.Toolbar
     * @method setTitle
     * @param {String/Ext.Title} title You can either pass a String, or a config/instance of
     * {@link Ext.Title}.
     */
 
    onItemAdd: function(item, index) {
        var defaultButtonUI = this.getDefaultButtonUI();
 
        if (defaultButtonUI) {
            if (item.isSegmentedButton) {
                if (item.getDefaultUI() == null) {
                    item.setDefaultUI(defaultButtonUI);
                }
            }
            else if (item.isButton && (item.getUi() == null)) {
                item.setUi(defaultButtonUI);
            }
        }
 
        this.callParent([item, index]);
    },
 
    factoryItem: function(config) {
        if (config === '->') {
            config = {
                xtype: 'component',
                flex: 1
            };
        }
 
        return this.callParent([config]);
    }
});