Ext.define('Ext.ux.feature.InfoSummary', {

    /* Begin Definitions */

    extend: 'Ext.grid.feature.AbstractSummary',

    alias: 'feature.infoSummary',

    /**
    * @cfg {String} dock 
    * Configure `'top'` or `'bottom'` top create a fixed summary row.
    *
    */
    dock: 'bottom',

    dockedSummaryCls: Ext.baseCSSPrefix + 'docked-info-summary',
    
    summaryRowCls: Ext.baseCSSPrefix + 'grid-row-info-summary ' + Ext.baseCSSPrefix + 'grid-row-total',
    summaryRowSelector: '.' + Ext.baseCSSPrefix + 'grid-row-info-summary.' + Ext.baseCSSPrefix + 'grid-row-total',
    summaryCellSelector: '.' + Ext.baseCSSPrefix + 'grid-cell.' + Ext.baseCSSPrefix + 'grid-td',
    panelBodyCls: Ext.baseCSSPrefix + 'info-summary-',

    infoSummaryRowTpl: [
        '<tpl for=".">',
        '<td class="' + Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-td">',
            '<div class="' + Ext.baseCSSPrefix + 'grid-cell-inner">',
                '{label}',
            '</div>',
        '</td>',
        '</tpl>',
    ],

    init: function(grid) {
        var me = this,
            view = me.view,
            dock = me.dock,
            store = grid.getStore();

        me.grid = grid;
        
        me.callParent([
            grid
        ]);
        grid.addBodyCls(me.panelBodyCls + dock);
        grid.headerCt.on({
            add: me.onStoreUpdate,
            afterlayout: me.onStoreUpdate,
            remove: me.onStoreUpdate,
            scope: me
        });
        grid.on({
            beforerender: function() {
                var tableCls = [me.summaryTableCls];
                    if (view.columnLines) {
                        tableCls[tableCls.length] = view.ownerCt.colLinesCls;
                    }
                me.summaryBar = grid.addDocked({
                    childEls: ['innerCt', 'item'],
                    renderTpl: [
                        '<div id="{id}-innerCt" data-ref="innerCt" role="presentation">',
                            '{%this.renderContent(out, values)%}',
                        '</div>',
                    ],
                    tpl: [
                        '<table id="{id}-item" data-ref="item" cellPadding="0" cellSpacing="0" class="' + tableCls.join(' ') + '">',
                            '<tr class="' + me.summaryRowCls + '">',
                                '{%',
                                    'this.renderSummaryRow(values, out)',
                                '%}',
                            '</tr>',
                        '</table>',
                        {
                            renderSummaryRow: function(values, out) {
                                let datas = values.map(function(v) {
                                    return { label: v }
                                });
                                out.push((me.infoSummaryRowTpl.isXTemplate ? me.infoSummaryRowTpl : new Ext.XTemplate(me.infoSummaryRowTpl)).applyOut(datas, out));
                            },
                        }
                    ],
                    height: 32,
                    scrollable: {
                        x: false,
                        y: false
                    },
                    itemId: 'info-summary-bar',
                    cls: [ me.dockedSummaryCls, me.dockedSummaryCls + '-' + dock ],
                    xtype: 'component',
                    dock: dock,
                    weight: 10000000,
                })[0];
            },
            afterrender: function() {
                grid.getView().getScrollable().addPartner(me.summaryBar.getScrollable(), 'x');
                me.onStoreUpdate();
                me.columnSizer = me.summaryBar.el;
            },
            single: true
        });

        me.bindStore(grid, store);
    },

    bindStore: function(grid, store) {
        var me = this;
 
        Ext.destroy(me.storeListeners);
        me.storeListeners = store.on({
            scope: me,
            destroyable: true,
            update: me.onStoreUpdate,
            datachanged: me.onStoreUpdate
        });
        
        me.callParent([grid, store]);
    },

    createSummaryRecord: function (view) {
        var me = this,
            columns = view.headerCt.getGridColumns(),
            remoteRoot = me.remoteRoot,
            summaryRecord = me.summaryRecord || (me.summaryRecord = new Ext.data.Model({
                id: view.id + '-info-summary-record'
            })),
            colCount = columns.length, i, column,
            dataIndex, summaryValue;
 
        // Set the summary field values 
        summaryRecord.beginEdit();
 
        if (remoteRoot) {
            summaryValue = me.generateSummaryData();
            
            if (summaryValue) {
                summaryRecord.set(summaryValue);
            }
        }
        else {
            for (i = 0; i < colCount; i++) {
                column = columns[i];
 
                // In summary records, if there's no dataIndex, then the value in regular rows must come from a renderer. 
                // We set the data value in using the column ID. 
                dataIndex = column.dataIndex || column.getItemId();
 
                // We need to capture this value because it could get overwritten when setting on the model if there 
                // is a convert() method on the model. 
                summaryValue = me.getSummary(view.store, column.summaryType, dataIndex);
                summaryRecord.set(dataIndex, summaryValue);
 
                // Capture the columnId:value for the summaryRenderer in the summaryData object. 
                me.setSummaryData(summaryRecord, column.getItemId(), summaryValue);
            }
        }
 
        summaryRecord.endEdit(true);
        // It's not dirty 
        summaryRecord.commit(true);
        summaryRecord.isSummary = true;
 
        console.log(summaryRecord);
        return summaryRecord;
    },

    onStoreUpdate: function() {
        var me = this,
            view = me.view,
            selector = me.summaryCellSelector,
            dock = me.dock,
            record, newCellDoms, summaryLabels = [];
 
        if (!view.rendered) {
            return;
        }
        record = me.createSummaryRecord(view);

        newCellDoms = Ext.fly(view.createRowElement(record, -1)).query(selector, true);

        if(!newCellDoms || newCellDoms.length === 0) {
            return;
        }
 
        if (!dock) {
            return;
        }
        
        for(let i = 0; i < newCellDoms.length; i++) {
            let innerText = newCellDoms[i].innerText.trim();
            if(innerText.length > 0) {
                summaryLabels.push(innerText);
            }
        }

        me.summaryBar.update(summaryLabels);
    },

    getSummaryBar: function() {
        return this.summaryBar;
    },

    destroy: function() {
        var me = this;
        me.summaryRecord = me.storeListeners = Ext.destroy(me.storeListeners);
        me.callParent();
    }

});