/**
 * The grouping panel
 */
Ext.define('Ext.grid.plugin.grouping.Panel', {
    extend: 'Ext.Panel',
    alias: 'widget.groupingpanel',
 
    requires: [
        'Ext.grid.plugin.grouping.Column',
        'Ext.grid.plugin.grouping.DragZone',
        'Ext.grid.plugin.grouping.DropZone'
    ],
 
    isGroupingPanel: true,
 
    config: {
        grid: null,
        store: null,
        columnConfig: {
            xtype: 'groupingpanelcolumn'
        }
    },
 
    docked: 'top',
    weight: 90, // the column header container has a weight of 100 so we want to dock it after that.
    weighted: true,
    height: 36,
    layout: 'hbox',
    border: false,
 
    header: false,
    padding: 0,
 
    touchAction: {
        panX: false,
        pinchZoom: false,
        doubleTapZoom: false
    },
 
    cls: Ext.baseCSSPrefix + 'grid-group-panel-body',
    hintTextCls: Ext.baseCSSPrefix + 'grid-group-panel-hint',
 
    groupingPanelText: 'Drag a column header here to group by that column',
    showGroupingPanelText: 'Show Group By Panel',
    hideGroupingPanelText: 'Hide Group By Panel',
    clearGroupText: 'Clear Group',
    sortAscText: 'Sort Ascending',
    sortDescText: 'Sort Descending',
    moveLeftText: 'Move left',
    moveRightText: 'Move right',
    moveBeginText: 'Move to beginning',
    moveEndText: 'Move to end',
    removeText: 'Remove',
 
    ascSortIconCls: Ext.baseCSSPrefix + 'grid-group-column-sort-icon-asc',
    descSortIconCls: Ext.baseCSSPrefix + 'grid-group-column-sort-icon-desc',
    groupingPanelIconCls: Ext.baseCSSPrefix + 'grid-group-panel-icon',
    clearGroupIconCls: Ext.baseCSSPrefix + 'grid-group-panel-clear-icon',
 
    initialize: function() {
        var me = this,
            grid = me.getGrid();
 
        me.dragZone = new Ext.grid.plugin.grouping.DragZone({
            element: me.el,
            view: me,
            grid: grid,
            constrain: Ext.getBody()
        });
        me.dropZone = new Ext.grid.plugin.grouping.DropZone({
            element: me.el,
            view: me,
            grid: grid
        });
 
        me.infoEl = me.bodyElement.createChild({
            cls: me.hintTextCls + ' ' + Ext.baseCSSPrefix + 'unselectable',
            html: me.groupingPanelText
        });
        me.setInfoElVisibility();
 
        me.manageBorders = false;
        me.callParent();
    },
 
    destroy: function() {
        var me = this;
 
        Ext.destroy(me.dragZone, me.dropZone);
        me.callParent();
    },
 
    /**
     * 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.getItems().length) {
            el.show();
        }
        else {
            el.hide();
        }
    },
 
    dragDropColumn: function(from, column, index) {
        var me = this,
            sorter, grouper;
 
        if (column.isGroupingPanelColumn) {
            me.insert(index, column);
        }
        else if (column.isGridColumn) {
            sorter = column.getSorter();
            grouper = column.getGrouper();
 
            if (!grouper) {
                grouper = new Ext.util.Grouper({
                    property: column.getDataIndex(),
                    direction: sorter ? sorter.getDirection() : 'ASC',
                    formatter: column.getGroupFormatter()
                });
                column.setGrouper(grouper);
            }
 
            me.addColumn({
                text: column.getText(),
                idColumn: column.getId(),
                grouper: grouper,
                column: column
            }, index);
 
            column.hide();
        }
 
        me.notifyGroupChange();
    },
 
    notifyGroupChange: function() {
        var me = this,
            items = me.getInnerItems(),
            len = items && items.length,
            groupers = [],
            store = this.getStore(),
            i, grouper, column;
 
        for (i = 0; i < len; i++) {
            column = items[i];
            grouper = column.getGrouper();
 
            if (grouper) {
                groupers.push(grouper);
            }
        }
 
        me.suspendChanges = true;
 
        if (!groupers.length) {
            store.clearGrouping();
        }
        else {
            store.setGroupers(groupers);
        }
 
        me.setInfoElVisibility();
    },
 
    updateGrid: function(grid) {
        var me = this,
            store = null;
 
        Ext.destroy(me.gridListeners);
 
        if (grid) {
            // catch this event to refresh the grouping columns in case one of them changed its name
            me.gridListeners = grid.on({
                storechange: me.onGridStoreChange,
                scope: me,
                destroyable: true
            });
 
            store = grid.getStore();
        }
 
        me.setStore(store);
    },
 
    updateStore: function(store) {
        var me = this;
 
        Ext.destroy(me.storeListeners);
 
        if (store) {
            me.storeListeners = store.on({
                groupschange: me.initGroupingColumns,
                groupchange: me.initGroupingColumns,
                scope: me,
                destroyable: true
            });
            me.initGroupingColumns();
        }
    },
 
    onGridStoreChange: function(grid, store) {
        this.setStore(store);
    },
 
    addColumn: function(config, pos, notify) {
        var me = this,
            colConfig = Ext.apply({}, me.getColumnConfig()),
            newCol;
 
        newCol = Ext.create(Ext.apply(colConfig, config));
 
        if (pos !== -1) {
            me.insert(pos, newCol);
        }
        else {
            me.add(newCol);
        }
 
        if (notify === true) {
            newCol.focus();
            me.notifyGroupChange();
        }
    },
 
    /**
     * Check if the grid store has groupers and add them to the grouping panel
     */
    initGroupingColumns: function() {
        var me = this,
            grid = me.getGrid(),
            store = me.getStore(),
            groupers = store.getGroupers(false),
            length = groupers && groupers.length,
            columns = grid.getColumns(),
            len = columns.length,
            columnsMap = Ext.Array.toValueMap(columns, '_dataIndex'),
            i, j, column, grouper, found;
 
        if (me.suspendChanges) {
            me.suspendChanges = false;
 
            return;
        }
 
        // remove all previously created columns
        me.removeAll(true);
 
        Ext.suspendLayouts();
 
        for (i = 0; i < length; i++) {
            grouper = groupers.items[i];
            found = false;
 
            for (j = 0; j < len; j++) {
                column = columns[j];
 
                if (column.getGrouper() === grouper) {
                    found = true;
                    break;
                }
            }
 
            if (!found) {
                column = columnsMap[grouper.getProperty()];
                column.setGrouper(grouper);
            }
 
            if (column) {
                me.addColumn({
                    text: column.getText(),
                    idColumn: column.getId(),
                    grouper: grouper,
                    column: column
                }, -1);
                column.hide();
            }
        }
 
        me.setInfoElVisibility();
        Ext.resumeLayouts(true);
    }
});