/**
 * This class implements the configurator panel.
 */
Ext.define('Ext.pivot.plugin.configurator.Panel', {
    extend: 'Ext.Panel',
 
    requires: [
        'Ext.pivot.plugin.configurator.Container',
        'Ext.pivot.plugin.configurator.DragZone',
        'Ext.pivot.plugin.configurator.DropZone',
        'Ext.pivot.plugin.configurator.PanelController',
        'Ext.pivot.plugin.configurator.Form',
        'Ext.pivot.plugin.configurator.Settings',
        'Ext.layout.HBox',
        'Ext.layout.VBox',
        'Ext.layout.Card',
        'Ext.TitleBar',
        'Ext.Promise'
    ],
 
    alias: 'widget.pivotconfigpanel',
    controller: 'pivotconfigpanel',
 
    isPivotConfigPanel: true,
 
    cls: Ext.baseCSSPrefix + 'pivot-grid-config-panel',
 
    showAnimation: {
        type: 'slideIn',
        duration: 250,
        easing: 'ease-out',
        direction: 'left'
    },
 
    hideAnimation: {
        type: 'slideOut',
        duration: 250,
        easing: 'ease-in',
        direction: 'right'
    },
 
    panelTitle: 'Configuration',
    
    /**
     * @cfg {String} panelAllFieldsText Text displayed in the container reserved for all available
     * fields when docked to top or bottom.
     */
    panelAllFieldsText: 'Drop Unused Fields Here',
    
    /**
     * @cfg {String} panelAllFieldsTitle Text displayed in the container reserved for all available
     * fields when docked to left or right.
     */
    panelAllFieldsTitle: 'All fields',
 
    /**
     * @cfg {String} panelTopFieldsText Text displayed in the container reserved for all top axis
     * fields when docked to top or bottom.
     */
    panelTopFieldsText: 'Drop Column Fields Here',
    
    /**
     * @cfg {String} panelTopFieldsTitle Text displayed in the container reserved for all top axis
     * fields when docked to left or right.
     */
    panelTopFieldsTitle: 'Column labels',
 
    /**
     * @cfg {String} panelLeftFieldsText Text displayed in the container reserved for all left axis
     * fields when docked to top or bottom.
     */
    panelLeftFieldsText: 'Drop Row Fields Here',
    
    /**
     * @cfg {String} panelLeftFieldsTitle Text displayed in the container reserved for all left axis
     * fields when docked to left or right.
     */
    panelLeftFieldsTitle: 'Row labels',
 
    /**
     * @cfg {String} panelAggFieldsText Text displayed in the container reserved for all aggregate
     * fields when docked to top or bottom.
     */
    panelAggFieldsText: 'Drop Agg Fields Here',
    
    /**
     * @cfg {String} panelAggFieldsTitle Text displayed in the container reserved for all aggregate
     * fields when docked to left or right.
     */
    panelAggFieldsTitle: 'Values',
    
    cancelText: 'Cancel',
    okText: 'Done',
 
    eventedConfig: {
        pivot: null,
        fields: null
    },
 
    listeners: {
        pivotchange: 'onPivotChanged',
        fieldschange: 'onFieldsChanged'
    },
 
    layout: 'card',
 
    initialize: function() {
        this.setup();
 
        return this.callParent();
    },
 
    /**
     * This function either moves or copies the dragged field from one container to another.
     *
     * @param {Ext.pivot.plugin.configurator.Container} fromContainer 
     * @param {Ext.pivot.plugin.configurator.Container} toContainer 
     * @param {Ext.data.Model} record 
     * @param {String} newPos New index position
     *
     * @private
     */
    dragDropField: function(fromContainer, toContainer, record, newPos) {
        var me = this,
            pivot = me.getPivot(),
            field = record.get('field'),
            fromFieldType = fromContainer.getFieldType(),
            toFieldType = toContainer.getFieldType(),
            controller = me.getController(),
            topAxisCt = controller.getTopAxisContainer(),
            leftAxisCt = controller.getLeftAxisContainer(),
            item;
 
        if (pivot.fireEvent('beforemoveconfigfield', this, {
            fromContainer: fromContainer,
            toContainer: toContainer,
            field: field
        }) !== false) {
            if (fromContainer !== toContainer) {
                if (toFieldType === 'all') {
                    // source is "Row labels"/"Column labels"/"Values"
                    // destination is "All fields"
                    // we just remove the field from the source
                    fromContainer.removeField(record);
                }
                else if (toFieldType === 'aggregate') {
                    // source is "Row labels"/"Column labels"/"All fields"
                    // destination is "Values"
                    // we copy the field to destination
                    toContainer.addField(field, newPos);
 
                    if (fromFieldType !== 'all') {
                        // remove the field from the left/top axis
                        fromContainer.removeField(record);
                    }
                }
                else {
                    // source is "Row labels"/"Column labels"/"Values"/"All fields"
                    // destination is "Row labels"/"Column labels"
                    // first let's check if the field is already in the destination container
                    item = me.findFieldInContainer(field, toContainer);
 
                    if (item) {
                        // the destination has the field already
                        return;
                    }
 
                    // See if it was on another axis.
                    if (toFieldType === 'leftAxis') {
                        item = me.findFieldInContainer(field, topAxisCt);
                        fromContainer = item ? topAxisCt : fromContainer;
                    }
                    else {
                        item = me.findFieldInContainer(field, leftAxisCt);
                        fromContainer = item ? leftAxisCt : fromContainer;
                    }
 
                    // If so, move it here.
                    if (item) {
                        fromContainer.removeField(item);
                        toContainer.addField(field);
                    }
                    else {
                        if (fromFieldType === 'aggregate') {
                            // we need to remove the dragged field because it was found
                            // on one of the axis
                            fromContainer.removeField(record);
                        }
 
                        toContainer.addField(field, newPos);
                    }
                }
            }
            else {
                toContainer.moveField(record, newPos);
            }
        }
 
    },
 
    isAllowed: function(fromContainer, toContainer, record) {
        var allowed = true,
            field = record.get('field'),
            fromFieldType = fromContainer && fromContainer.getFieldType(),
            toFieldType = toContainer && toContainer.getFieldType();
 
        if (fromFieldType === 'aggregate' &&
            (toFieldType === 'leftAxis' || toFieldType === 'topAxis')) {
            allowed = !this.findFieldInContainer(field, toContainer);
        }
 
        return allowed;
    },
 
    /**
     *
     * @param {Ext.pivot.plugin.configurator.Field} field 
     * @param {Ext.pivot.plugin.configurator.Container} container 
     * @return {Ext.data.Model} 
     *
     * @private
     */
    findFieldInContainer: function(field, container) {
        var store = container.getStore(),
            length = store.getCount(),
            i, item;
 
        for (= 0; i < length; i++) {
            item = store.getAt(i);
 
            if (item.get('field').getDataIndex() === field.getDataIndex()) {
                return item;
            }
        }
    },
 
    setup: function() {
        var me = this,
            listeners = {
                configchange: 'onConfigChanged',
                toolsbtnpressed: 'showCard',
                removefield: 'onRemoveField'
            };
 
        me.add([{
            itemId: 'main',
            xtype: 'container',
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
 
            defaults: {
                flex: 1
            },
 
            items: [{
                xtype: 'titlebar',
                docked: 'top',
                title: me.panelTitle,
                titleAlign: 'left',
                items: [{
                    xtype: 'tool',
                    type: 'gear',
                    align: 'right',
                    handler: 'showSettings'
                }, {
                    text: me.cancelText,
                    align: 'right',
                    ui: 'alt',
                    handler: 'cancelConfiguration'
                }, {
                    text: me.okText,
                    align: 'right',
                    ui: 'alt',
                    handler: 'applyConfiguration',
                    margin: '0 0 0 5'
                }]
            }, {
                reference: 'fieldsCt',
                xtype: 'pivotconfigcontainer',
                title: me.panelAllFieldsTitle,
                emptyText: me.panelAllFieldsText,
                fieldType: 'all',
                listeners: listeners
            }, {
                xtype: 'container',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                defaults: {
                    xtype: 'pivotconfigcontainer',
                    flex: 1
                },
                items: [{
                    reference: 'fieldsAggCt',
                    title: me.panelAggFieldsTitle,
                    emptyText: me.panelAggFieldsText,
                    fieldType: 'aggregate',
                    listeners: listeners
                }, {
                    reference: 'fieldsLeftCt',
                    title: me.panelLeftFieldsTitle,
                    emptyText: me.panelLeftFieldsText,
                    fieldType: 'leftAxis',
                    listeners: listeners
                }, {
                    reference: 'fieldsTopCt',
                    title: me.panelTopFieldsTitle,
                    emptyText: me.panelTopFieldsText,
                    fieldType: 'topAxis',
                    listeners: listeners
                }]
            }]
 
        }, {
            itemId: 'field',
            xtype: 'pivotconfigform',
            listeners: {
                close: 'backToMainView',
                beforeapplyconfigfieldsettings: 'onBeforeApplyConfigFieldSettings',
                applyconfigfieldsettings: 'onApplyConfigFieldSettings'
            }
        }, {
            itemId: 'settings',
            xtype: 'pivotsettings',
            listeners: {
                close: 'backToMainView',
                beforeapplypivotsettings: 'onBeforeApplyPivotSettings',
                applypivotsettings: 'onApplyPivotSettings'
            }
        }]);
    },
 
    /**
     * Returns the container that stores all unused fields.
     *
     * @returns {Ext.pivot.plugin.configurator.Container} 
     */
    getAllFieldsContainer: function() {
        return this.lookup('fieldsCt');
    },
 
    /**
     * Returns the header of the container that stores all unused fields.
     *
     * @return {Ext.panel.Header} 
     * @since 6.5.0
     */
    getAllFieldsHeader: function() {
        return this.getAllFieldsContainer().getHeader();
    },
 
    /**
     * Set visibility of the "All fields" header and container
     * @param {Boolean} visible 
     * @since 6.5.0
     */
    setAllFieldsContainerVisible: function(visible) {
        this.getAllFieldsContainer().setHidden(!visible);
    },
 
    /**
     * Returns the container that stores all fields configured on the left axis.
     *
     * @returns {Ext.pivot.plugin.configurator.Container} 
     */
    getLeftAxisContainer: function() {
        return this.lookup('fieldsLeftCt');
    },
 
    /**
     * Returns the header of the container that stores all fields configured on the left axis.
     *
     * @return {Ext.panel.Header} 
     * @since 6.5.0
     */
    getLeftAxisHeader: function() {
        return this.getLeftAxisContainer().getHeader();
    },
 
    /**
     * Set visibility of the "Row labels" header and container
     * @param {Boolean} visible 
     * @since 6.5.0
     */
    setLeftAxisContainerVisible: function(visible) {
        this.getLeftAxisContainer().setHidden(!visible);
    },
 
    /**
     * Returns the container that stores all fields configured on the top axis.
     *
     * @returns {Ext.pivot.plugin.configurator.Container} 
     */
    getTopAxisContainer: function() {
        return this.lookup('fieldsTopCt');
    },
 
    /**
     * Returns the header of the container that stores all fields configured on the top axis.
     *
     * @return {Ext.panel.Header} 
     * @since 6.5.0
     */
    getTopAxisHeader: function() {
        return this.getTopAxisContainer().getHeader();
    },
 
    /**
     * Set visibility of the "Column labels" header and container
     * @param {Boolean} visible 
     * @since 6.5.0
     */
    setTopAxisContainerVisible: function(visible) {
        this.getTopAxisContainer().setHidden(!visible);
    },
 
    /**
     * Returns the container that stores all fields configured on the aggregate.
     *
     * @returns {Ext.pivot.plugin.configurator.Container} 
     */
    getAggregateContainer: function() {
        return this.lookup('fieldsAggCt');
    },
 
    /**
     * Returns the header of the container that stores all fields configured on the aggregate.
     *
     * @return {Ext.panel.Header} 
     * @since 6.5.0
     */
    getAggregateHeader: function() {
        return this.getAggregateContainer().getHeader();
    },
 
    /**
     * Set visibility of the "Values" header and container
     * @param {Boolean} visible 
     * @since 6.5.0
     */
    setAggregateContainerVisible: function(visible) {
        this.getAggregateContainer().setHidden(!visible);
    }
});