/**
 * This plugin allows the user to view all records that were aggregated for a specified cell.
 *
 * The user has to double click that cell to open the records viewer.
 *
 * **Note:** If a {@link Ext.pivot.matrix.Remote Remote} matrix is used then the plugin requires
 * a {@link #remoteStore} to be provided to fetch the records for a left/top keys pair.
 */
Ext.define('Ext.pivot.plugin.DrillDown', {
    alternateClassName: [
        'Mz.pivot.plugin.DrillDown'
    ],
 
    alias: [
        'plugin.pivotdrilldown',
        'plugin.mzdrilldown'
    ],
 
    extend: 'Ext.plugin.Abstract',
    
    requires: [
        'Ext.pivot.Grid',
        'Ext.window.Window',
        'Ext.data.proxy.Memory',
        'Ext.data.Store',
        'Ext.toolbar.Paging'
    ],
 
    /**
     * Fired on the pivot component when the drill down window is visible
     *
     * @event showdrilldownpanel
     * @param {Ext.window.Window} panel Drill down window
     */
 
    /**
     * Fired on the pivot component when the drill down window is hidden
     *
     * @event hidedrilldownpanel
     * @param {Ext.window.Window} panel Drill down window
     */
 
 
    /**
     *  `"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:  'top',
 
    config: {
        /**
         * @cfg {Ext.grid.column.Column[]} [columns] Specify which columns should be visible in the grid.
         *
         * Use the same definition as for a grid column. Header and dataIndex are the most important ones.
         */
        columns:     null,
        /**
         * @cfg {Number} width Width of the viewer's window.
         */
        width:        400,
        /**
         * @cfg {Number} height Height of the viewer's window.
         */
        height:        300,
        /**
         * @cfg {Ext.data.Store} remoteStore
         * Provide either a store config or a store instance when using a {@link Ext.pivot.matrix.Remote Remote} matrix on the pivot grid.
         *
         * The store will be remotely filtered to fetch records from the server.
         */
        remoteStore:    null,
        /**
         * @private
         */
        grid: null,
        /**
         * @private
         */
        view: null
    },
 
    /**
     * @cfg {String} textWindow Viewer's window title.
     */
    textWindow: 'Drill down window',
 
    init: function(grid){
        //<debug> 
        // this plugin is available only for the pivot grid 
        if (!grid.isPivotGrid) {
            Ext.raise('This plugin is only compatible with Ext.pivot.Grid');
        }
        //</debug> 
 
        this.setGrid(grid);
        return this.callParent([grid]);
    },
 
    destroy: function(){
        this.setConfig({
            grid: null,
            view: null
        });
        this.callParent();
    },
 
    updateGrid: function(grid){
        Ext.destroy(this.gridListeners);
 
        if(grid){
            this.gridListeners = grid.on({
                pivotitemcelldblclick:      'showPanel',
                pivotgroupcelldblclick:     'showPanel',
                pivottotalcelldblclick:     'showPanel',
                scope:                      this,
                destroyable:                true
            });
        }
    },
 
    updateView: function(view, oldView){
        Ext.destroy(oldView);
    },
 
    showPanel: function(params, e, eOpts){
        var me = this,
            grid = me.getGrid(),
            matrix = grid.getMatrix(),
            columns = Ext.Array.from(me.getColumns() || []),
            result, fields, store, filters, view,
            i, len, value;
 
        // do nothing if the plugin is disabled 
        if(me.disabled) {
            return;
        }
 
        result = matrix.results.get(params.leftKey, params.topKey);
 
        if(!result){
            return;
        }
 
        switch(matrix.type){
            case 'local':
                fields = matrix.store.model.getFields();
                store = Ext.create('Ext.data.Store', {
                    pageSize: 25,
                    remoteSort: true,
                    fields: Ext.clone(fields),
                    proxy: {
                        type: 'memory',
                        reader: {
                            type: 'array'
                        },
                        enablePaging: true
                    }
                });
                // if no columns are defined then use those defined in the pivot grid store 
                if (columns.length === 0) {
                    len = fields.length;
                    for(i = 0; i < len; i++){
                        value = fields[i];
                        columns.push({
                            text: Ext.String.capitalize(value.name),
                            dataIndex: value.name
                        });
                    }
                }
                store.getProxy().data = result.records;
                store.load();
                break;
 
            case 'remote':
                store = Ext.getStore(me.getRemoteStore());
 
                if(store){
                    store.setRemoteFilter(true);
                }
 
                //<debug> 
                if(columns.length === 0){
                    Ext.raise('No columns defined for the drill down grid!');
                }
                //</debug> 
 
                filters = Ext.Array.merge(me.getFiltersFromParams(result.getLeftAxisItem() ? result.getLeftAxisItem().data : {}), me.getFiltersFromParams(result.getTopAxisItem() ? result.getTopAxisItem().data : {}));
                store.clearFilter(true);
                if(filters.length > 0) {
                    store.addFilter(filters);
                }else{
                    store.load();
                }
                break;
 
            default:
                return;
        }
 
        // create the window that will show the records 
        view = me.createPanel(store, columns);
        view.show();
        me.setView(view);
        grid.fireEvent('showdrilldownpanel', view);
    },
 
    createPanel: function(store, columns){
        var me = this;
 
        return Ext.create('Ext.window.Window', {
            title: me.textWindow,
            width: me.getWidth(),
            height: me.getHeight(),
            layout: 'fit',
            modal: true,
            closeAction: 'hide',
            items: [{
                xtype: 'grid',
                border: false,
                viewConfig: {
                    loadMask: false
                },
                columns: columns,
                store: store,
                dockedItems: [{
                    xtype: 'pagingtoolbar',
                    store: store,   // same store GridPanel is using 
                    dock: 'bottom',
                    displayInfo: true
                }]
            }],
            listeners: {
                close: 'onClosePanel',
                scope: me
            }
        });
    },
 
    onClosePanel: function(){
        var view = this.getView();
 
        this.getGrid().fireEvent('hidedrilldownpanel', view);
        this.setView(null);
    },
 
    getFiltersFromParams: function(obj){
        var filters = [],
            i, len, keys;
 
        if(Ext.isObject(obj)) {
            keys = Ext.Object.getKeys(obj);
            len = keys.length;
 
            for (i = 0; i < len; i++) {
                filters.push({
                    property: keys[i],
                    exactMatch: true,
                    value: obj[keys[i]]
                });
            }
        }
 
        return filters;
    }
 
});