/**
 * This is a container that holds configurator fields.
 */
Ext.define('Ext.pivot.plugin.configurator.Container', {
    extend: 'Ext.dataview.List',
 
    alias: 'widget.pivotconfigcontainer',
 
    requires: [
        'Ext.pivot.plugin.configurator.Column',
        'Ext.pivot.plugin.configurator.DragZone',
        'Ext.pivot.plugin.configurator.DropZone'
    ],
 
    handleSorting:              false,
    handleFiltering:            false,
    isConfiguratorContainer:    true,
    useSimpleItems:             false,
    disableSelection:           true,
    defaultType:                'pivotconfigfield',
    deferEmptyText:             false,
 
    touchAction: {
        panX: false,
        pinchZoom: false,
        doubleTapZoom: false
    },
 
    store: {
        type: 'array',
        fields: [
            {name: 'text', type: 'string'},
            {name: 'field', type: 'auto'}
        ]
    },
 
    items: [{
        docked:     'top',
        xtype:      'titlebar',
        titleAlign: 'left'
    }],
 
    config: {
        /**
         * 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',
        title:          null
    },
 
    initialize: function() {
        var me = this;
 
        me.callParent();
        me.dragZone = new Ext.pivot.plugin.configurator.DragZone(me);
        me.dropZone = new Ext.pivot.plugin.configurator.DropZone(me);
 
        if (me.getFieldType() !== 'all') {
            me.container.element.on({
                delegate: '.' + Ext.baseCSSPrefix + 'pivot-grid-config-column-btn',
                tap: 'handleColumnBtnTap',
                scope: me
            });
 
            me.container.element.on({
                delegate: '.' + Ext.baseCSSPrefix + 'listitem-body',
                tap: 'handleColumnTap',
                scope: me
            });
        }
    },
 
    destroy: function(){
        Ext.destroyMembers(this, 'storeListeners', 'dragZone', 'dropZone');
        this.callParent();
    },
 
    updateTitle: function(title){
        var titleBar = this.down('titlebar');
 
        if(titleBar){
            titleBar.setTitle(title);
        }
    },
 
    updateFieldType: function(type){
        if(type !== 'all'){
            this.setUserCls(Ext.baseCSSPrefix + 'pivot-grid-config-container');
        }
    },
 
    updateStore: function(store){
        var me = this;
 
        Ext.destroy(me.storeListeners);
        if(store){
            me.storeListeners = store.on({
                datachanged: me.applyChanges,
                scope: me
            });
        }
    },
 
    /**
     * This is used for firing the 'configchange' event
     *
     */
    applyChanges: function(){
        if(this.getFieldType() !== 'all') {
            this.fireEvent('configchange', this);
        }
    },
 
    /**
     * This is used for adding a new config field to this container.
     *
     * @private
     */
    addField: function(config, pos){
        var me = this,
            store = me.getStore(),
            fieldType = me.getFieldType(),
            cfg = {};
 
        config.isAggregate = (fieldType === 'aggregate');
        Ext.apply(cfg, {
            field:      config,
            text:       config.getFieldText()
        });
 
        if(pos >= 0){
            store.insert(pos, cfg);
        }else{
            store.add(cfg);
        }
    },
 
    removeField: function(record){
        this.getStore().remove(record);
        record.set('field', null);
    },
 
    moveField: function(record, pos){
        var store = this.getStore(),
            index = store.indexOf(record);
 
        if(pos === -1 && index === store.getCount() - 1){
            // nothing to do here;
            // the record is already on the last position in the store
            return;
        }
 
        store.remove(record);
        if(pos >= 0){
            store.insert(pos, record);
        }else{
            store.add(record);
        }
    },
 
    handleColumnBtnTap: function(e){
        var me = this,
            target = Ext.fly(e.currentTarget),
            item = target.up('.' + me.getBaseCls() + 'item').component,
            record = me.getStore().getAt(item.$dataIndex);
 
        if(!record){
            return;
        }
 
        if(target.hasCls(Ext.baseCSSPrefix + 'pivot-grid-config-column-btn-delete')){
            me.fireEvent('removefield', me, item, record);
            return;
        }
 
        if(target.hasCls(Ext.baseCSSPrefix + 'pivot-grid-config-column-btn-tools')){
            me.fireEvent('toolsbtnpressed', me, item);
            return;
        }
 
    },
 
    handleColumnTap: function(e){
        var me = this,
            target = Ext.fly(e.currentTarget),
            item = target.up('.' + me.getBaseCls() + 'item').component,
            record = me.getStore().getAt(item.$dataIndex);
 
        if(!record){
            return;
        }
        me.fireEvent('toolsbtnpressed', me, item);
    }
 
});