/**
 * This is a container that holds configurator fields.
 */
Ext.define('Ext.pivot.plugin.configurator.Container', {
    extend: 'Ext.panel.Panel',
 
    requires: [
        'Ext.pivot.plugin.configurator.Column'
    ],
 
    mixins: [
        'Ext.util.FocusableContainer'
    ],
 
    alias: 'widget.pivotconfigcontainer',
    
    childEls:                   ['innerCt'],
    handleSorting:              false,
    handleFiltering:            false,
    position:                   'top',
    border:                     false,
    enableFocusableContainer:   true,
    isConfiguratorContainer:    true,
 
    cls:                        Ext.baseCSSPrefix + 'pivot-grid-config-container-body',
    dockedTopRightCls:          Ext.baseCSSPrefix + 'pivot-grid-config-container-body-tr',
    dockedBottomLeftCls:        Ext.baseCSSPrefix + 'pivot-grid-config-container-body-bl',
    hintTextCls:                Ext.baseCSSPrefix + 'pivot-grid-config-container-hint',
 
    config: {
        /**
         * @cfg {String} fieldType 
         * Possible values:
         *
         * - `all` = the container is the "all fields" area;
         * - `aggregate` = the container is the "values" area;
         * - `leftAxis` = the container is the "row values" area;
         * - `topAxis` = the container is the "column values" area;
         *
         */
        fieldType:      'all',
        dragDropText:   ' '
    },
 
    initComponent: function(){
        var me = this;
 
        if(me.position == 'top' || me.position == 'bottom'){
            Ext.apply(me, {
                style:          'overflow:hidden',
                layout:         'column',
                height:         'auto'
            });
        }else{
            Ext.apply(me, {
                layout: {
                    type: 'vbox',
                    align:  'stretch'
                }
            });
        }
 
        if(me.position == 'top' || me.position == 'right') {
            me.cls += ' ' + me.dockedTopRightCls;
        }else{
            me.cls += ' ' + me.dockedBottomLeftCls;
        }
 
        me.callParent(arguments);
    },
 
    destroy: function(){
        this.callParent();
        this.infoEl = Ext.destroy(this.infoEl);
    },
 
    afterRender: function(){
        var me = this;
 
        me.callParent();
 
        me.infoEl = me.innerCt.createChild({
            cls: me.hintTextCls,
            html: me.getDragDropText()
        });
        me.setInfoElVisibility();
    },
    
    /**
     * This is used for firing the 'configchange' event
     *
     */
    applyChanges: function(field, force){
        if(this.getFieldType() != 'all' || force === true) {
            this.fireEvent('configchange', field || this);
        }
    },
 
    /**
     * This is used for adding a new config field to this container.
     * @return {Ext.pivot.plugin.configurator.Column} The new configurator field.
     *
     * @private
     */
    addField: function(config, pos, notify) {
        var me = this,
            cfg = {
                xtype: 'pivotconfigfield',
                field: config,
                header: config.getHeader(),
                
                // These are drag/droppable, so need 
                // panning disabled. 
                touchAction: {
                    panX: false,
                    panY: false
                }
            },
            newCol;
 
        config.isAggregate = (me.getFieldType() === 'aggregate');
 
        if (pos !== -1) {
            newCol = me.insert(pos, cfg);
        } else {
            newCol = me.add(cfg);
        }
 
        if (notify === true){
            me.applyChanges(newCol);
        }
        return newCol;
    },
 
    onAdd: function(column){
        this.setInfoElVisibility();
 
        column.setFieldType(this.getFieldType());
        this.callParent(arguments);
    },
 
    onRemove: function(){
        this.setInfoElVisibility();
    },
 
    /**
     * This is used for moving a field inside this container.
     *
     * @private
     */
    moveField: function(from, to, position){
        var me = this;
 
        if(Ext.isString(from)){
            from = me.items.getByKey(from);
        }
        if(Ext.isString(to)){
            to = me.items.getByKey(to);
        }
 
        if(from != to) {
            me['move' + Ext.String.capitalize(position)](from, to);
            me.applyChanges(from);
        }
    },
 
    /**
     * This is used to remove a field inside this container and apply changes
     *
     * @param {Ext.pivot.plugin.configurator.Column} field
     *
     * @private
     */
    removeField: function(field){
        this.remove(field);
        this.applyChanges();
    },
 
    /**
     * The container has an info text displayed inside. This function makes it visible or hidden.
     *
     * @private
     */
    setInfoElVisibility: function(){
        var el = this.infoEl;
 
        if(!el) {
            return;
        }
 
        if(this.items.getCount() == 0) {
            el.show();
        }else{
            el.hide();
        }
    }
 
    
});