/**
 * This class is a grid {@link Ext.plugin.Abstract plugin} that adds a filter bar
 * below the grid column headers.
 *
 * # Example Usage
 *
 *     @example
 *     var shows = Ext.create('Ext.data.Store', {
 *         fields: ['id','show'],
 *         data: [
 *             {id: 0, show: 'Battlestar Galactica'},
 *             {id: 1, show: 'Doctor Who'},
 *             {id: 2, show: 'Farscape'},
 *             {id: 3, show: 'Firefly'},
 *             {id: 4, show: 'Star Trek'},
 *             {id: 5, show: 'Star Wars: Christmas Special'}
 *         ]
 *     });
 *
 *     Ext.create('Ext.grid.Panel', {
 *         renderTo: Ext.getBody(),
 *         title: 'Sci-Fi Television',
 *         height: 250,
 *         width: 250,
 *         store: shows,
 *         plugins: {
 *             gridfilterbar: true
 *         },
 *         columns: [{
 *             dataIndex: 'id',
 *             text: 'ID',
 *             width: 50
 *         },{
 *             dataIndex: 'show',
 *             text: 'Show',
 *             flex: 1,
 *             filterType: 'string'
 *         }]
 *     });
 *
 *     Ext.create('Ext.grid.Panel', {
 *         renderTo: Ext.getBody(),
 *         title: 'Sci-Fi Television',
 *         height: 250,
 *         width: 250,
 *         store: shows,
 *         plugins: {
 *             gridfilterbar: true
 *         },
 *         columns: [{
 *             dataIndex: 'id',
 *             text: 'ID',
 *             width: 50
 *         },{
 *             dataIndex: 'show',
 *             text: 'Show',
 *             flex: 1,
 *             filterType: {
 *                 // required configs
 *                 type: 'string',
 *                 // optional configs
 *                 value: 'star',  // setting a value makes the filter active.
 *                 fieldDefaults: {
 *                     // any Ext.form.field.Text configs accepted
 *                 }
 *             }
 *         }]
 *     });
 *
 * # Features
 *
 * ## Filtering implementations
 *
 * Currently provided filter types are:
 *
 *   * `{@link Ext.grid.plugin.filterbar.filters.Boolean boolean}`
 *   * `{@link Ext.grid.plugin.filterbar.filters.Date date}`
 *   * `{@link Ext.grid.plugin.filterbar.filters.List list}`
 *   * `{@link Ext.grid.plugin.filterbar.filters.Number number}`
 *   * `{@link Ext.grid.plugin.filterbar.filters.String string}`
 *
 *
 * ## Grid functions
 *
 * The following functions are added to the grid:
 * - showFilterBar - will make the filter bar visible
 * - hideFilterBar - will hide the filter bar
 *
 *
 */
Ext.define('Ext.grid.plugin.filterbar.FilterBar', {
    extend: 'Ext.grid.plugin.BaseFilterBar',
    alias: 'plugin.gridfilterbar',

    requires: [
        'Ext.grid.plugin.filterbar.filters.String',
        'Ext.grid.plugin.filterbar.filters.Date',
        'Ext.grid.plugin.filterbar.filters.Number',
        'Ext.grid.plugin.filterbar.filters.Boolean',
        'Ext.grid.plugin.filterbar.filters.None',
        'Ext.grid.plugin.filterbar.filters.List',
        'Ext.grid.plugin.filterbar.filters.InList'
    ],

    headerListeners: {
        columnshow: 'onColumnShow',
        columnhide: 'onColumnHide',
        add: 'onColumnAdd',
        remove: 'onColumnRemove',
        afterlayout: 'onHeaderLayout'
    },

    gridListeners: {
        storeChange: 'onGridStoreChanged'
    },

    /**
     *  `"both"` (the default) - The plugin is added to both grids
     *  `"top"` - The plugin is added to the containing Panel
     *  `"locked"` - The plugin is added to the locked (left) grid
     *  `"normal"` - The plugin is added to the normal (right) grid
     *
     * @private
     */
    lockableScope: 'both',

    createFilterBar: function() {
        var me = this,
            bar;

        bar = me.getGrid().addDocked({
            weight: 100,
            xtype: 'container',
            hidden: me.getHidden(),
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            childEls: ['innerCt'],
            scrollable: {
                x: false,
                y: false
            },
            listeners: {
                afterrender: 'onBarRender',
                scope: me
            }
        })[0];

        bar.addCls([me.filterBarCls, Ext.baseCSSPrefix + 'grid-header-ct']);

        me.setBar(bar);
    },

    updateGrid: function(grid, oldGrid) {
        var me = this,
            listeners = me.getHeaderListeners();

        me.callParent([grid, oldGrid]);

        me.listenersHeader = Ext.destroy(me.listenersHeader);

        if (grid && listeners) {
            me.listenersHeader = grid.headerCt.on(Ext.apply(listeners, {
                scope: me,
                destroyable: true
            }));
        }
    },

    setupGridFunctions: function() {
        var me = this,
            grid = me.getGrid(),
            mainGrid;

        if (grid) {
            if (grid.isLocked) {
                mainGrid = grid.ownerGrid;
                mainGrid.showFilterBar = Ext.bind(me.showFilterBarPartners, me);
                mainGrid.hideFilterBar = Ext.bind(me.hideFilterBarPartners, me);
            }

            grid.showFilterBar = Ext.bind(me.showFilterBar, me);
            grid.hideFilterBar = Ext.bind(me.hideFilterBar, me);
        }
    },

    showFilterBar: function() {
        var me = this;

        if (me.isDestroyed) {
            return;
        }

        me.callParent();
        me.getBar().getScrollable().syncWithPartners();
    },

    showFilterBarPartners: function() {
        this.showFilterBar();
        this.lockingPartner.showFilterBar();
    },

    hideFilterBarPartners: function() {
        this.hideFilterBar();
        this.lockingPartner.hideFilterBar();
    },

    onBarRender: function(bar) {
        var grid = this.getGrid();

        grid.getView().getScrollable().addPartner(bar.getScrollable(), 'x');
        this.initializeFilters(grid.columnManager.getColumns());
    },

    onHeaderLayout: function() {
        this.resizeFilters();
        this.adjustFilterBarSize();
    },

    onGridStoreChanged: function(grid, store) {
        this.setStore(store);
        this.resetFilters();
    },

    onColumnAdd: function() {
        var me = this,
            // get all the columns excepts group header
            columns = me.getGridColumns(),
            i, column, filter;

        // reposition all the filter bar items
        // otherwise, nested column filters will not be positioned
        for (i = 0; i < columns.length; i++) {
            column = columns[i];

            filter = column.getFilterType();

            if (!filter || !filter.isGridFilter) {
                filter = me.createColumnFilter(column);
            }

            me.getBar().insert(i, filter.getField());
        }

        me.adjustFilterBarSize();
    },

    onColumnRemove: function() {
        this.adjustFilterBarSize();
    },

    onColumnShow: function(header, column) {
        this.setFilterVisibility(column, true);
    },

    onColumnHide: function(header, column) {
        this.setFilterVisibility(column, false);
    },

    setFilterVisibility: function(column, visible) {
        // Update the column filter component visibility for the nested columns
        if (column.isGroupHeader) {
            column.items.each(function(subColumn) {
                this.setFilterVisibility(subColumn, visible);
            }, this);
        }

        this.callParent(arguments);
    },

    adjustFilterBarSize: function() {
        var bar = this.getBar(),
            headerCt = this.getGrid().headerCt,
            innerCt = headerCt.layout.innerCt;

        if (bar.rendered && innerCt) {
            // Synchronize the width of the bars' inner container with that of the column headers'.
            bar.innerCt.setWidth(innerCt.getWidth());
        }
    },

    createColumnFilter: function(column) {
        if (column.filter) {
            column.setFilterType(column.filter);
            delete column.filter;
        }

        return this.callParent([column]);
    },

    getGridColumns: function() {
        return this.getGrid().columnManager.getColumns();
    }
});