/**
 * This is a container that holds configurator fields.
 */
Ext.define('Ext.pivot.plugin.configurator.Container', {
    extend: 'Ext.Panel',
 
    alias: 'widget.pivotconfigcontainer',
 
    requires: [
        'Ext.pivot.plugin.configurator.Column',
        'Ext.pivot.plugin.configurator.DragZone',
        'Ext.pivot.plugin.configurator.DropZone',
        'Ext.dataview.List'
    ],
 
    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',
        emptyText: null,
 
        store: {
            type: 'array',
            fields: [
                {name: 'text', type: 'string'},
                {name: 'field', type: 'auto'}
            ]
        },
 
        list: {
            xclass: 'Ext.dataview.List',
            handleSorting: false,
            handleFiltering: false,
            isConfiguratorContainer: true,
            disableSelection: true,
            itemConfig: {
                xtype: 'pivotconfigfield'
            },
            deferEmptyText: false,
            touchAction: {
                panX: false,
                pinchZoom: false,
                doubleTapZoom: false
            },
            itemRipple: false
        }
    },
 
    layout: 'fit',
 
    initialize: function() {
        var me = this,
            list = me.getList();
 
        me.callParent();
 
        me.dragZone = new Ext.pivot.plugin.configurator.DragZone(me);
        me.dropZone = new Ext.pivot.plugin.configurator.DropZone(me);
 
        if (me.getFieldType() !== 'all') {
            list.element.on({
                delegate: '.' + Ext.baseCSSPrefix + 'pivot-grid-config-column-btn',
                tap: me.handleColumnBtnTap,
                scope: me
            });
 
            list.element.on({
                delegate: '.' + Ext.baseCSSPrefix + 'listitem-body-el',
                tap: me.handleColumnTap,
                scope: me
            });
        }
    },
 
    destroy: function () {
        Ext.destroyMembers(this, 'storeListeners', 'dragZone', 'dropZone');
 
        this.callParent();
    },
 
    updateFieldType: function (type) {
        if (type !== 'all') {
            this.setUserCls(Ext.baseCSSPrefix + 'pivot-grid-config-container');
        }
    },
 
    updateEmptyText: function(text) {
        var list = this.getList();
 
        if(list) {
            list.setEmptyText(text);
        }
    },
 
    applyList: function (list, oldList) {
        var store;
 
        if (list) {
            store = this.getStore();
 
            if (list.isComponent) {
                list.setStore(store);
            } else {
                list.store = store;
                list.emptyText = this.getEmptyText();
 
                list = Ext.factory(list, Ext.dataview.List, oldList);
            }
        }
 
        return list;
    },
 
    updateList: function (list) {
        if (list) {
            this.add(list);
        }
    },
 
    applyStore: function (store) {
        return Ext.Factory.store(store);
    },
 
    updateStore: function (store, oldStore) {
        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.getList().baseCls + 'item').component,
            record = item.getRecord();
 
        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);
        }
    },
 
    handleColumnTap: function (e) {
        var me = this,
            target = Ext.fly(e.currentTarget),
            item = target.up('.' + me.getList().baseCls + 'item').component,
            record = item.getRecord();
 
        if (!record) {
            return;
        }
 
        me.fireEvent('toolsbtnpressed', me, item);
    }
});