Ext.define('Ext.overrides.grid.feature.Summary', {
    override: 'Ext.grid.feature.Summary',

    // override
    fixed: undefined,
    fixedSummaryCls: Ext.baseCSSPrefix + 'fixed-summary',

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

        // when 'fixed' is true, 'dock' must be a defined value, default 'bottom'
        if(fixed) {
            dock = me.dock = dock || 'bottom';
        }
        me.callParent([grid]);

        if (dock) {
            grid.addBodyCls(me.panelBodyCls + dock);
            grid.headerCt.on({
                add: me.onStoreUpdate,
                // we need to fire onStoreUpdate afterlayout for docked items 
                // to re-run the renderSummaryRow on show/hide columns. 
                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">',
                            '<table id="{id}-item" data-ref="item" cellPadding="0" cellSpacing="0" class="' + tableCls.join(' ') + '">',
                            '<tr class="' + me.summaryRowCls + '"></tr>',
                            '</table>',
                            '</div>'
                        ],
                        scrollable: {
                            x: false,
                            y: false
                        },
                        hidden: !me.showSummaryRow,
                        itemId: 'summaryBar',
                        cls: [me.dockedSummaryCls, me.dockedSummaryCls + '-' + dock, (fixed ? me.fixedSummaryCls : '')],
                        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
            });
        } else {
            if (grid.bufferedRenderer) {
                me.wrapsItem = true;
                view.addRowTpl(me.fullSummaryTpl).summaryFeature = me;
                view.on('refresh', me.onViewRefresh, me);
            } else {
                me.wrapsItem = false;
                me.view.addFooterFn(me.renderSummaryRow);
            }
        }

        grid.headerCt.on({
            afterlayout: me.afterHeaderCtLayout,
            scope: me
        });

        grid.ownerGrid.on({
            beforereconfigure: me.onBeforeReconfigure,
            columnmove: me.onStoreUpdate,
            scope: me
        });
        me.bindStore(grid, grid.getStore());
    },

    onStoreUpdate: function () {
        var me = this,
            view = me.view,
            selector = me.summaryRowSelector,
            dock = me.dock,
            fixed = me.fixed,
            record, newRowDom, oldRowDom, newCellDoms, p;

        if (!view.rendered) {
            return;
        }

        record = me.createSummaryRecord(view);
        newRowDom = Ext.fly(view.createRowElement(record, -1)).down(selector, true);

        if (!newRowDom) {
            return;
        }

        if(fixed) {
            newCellDoms = newRowDom.children;
            for(let i = newCellDoms.length - 1; i >= 0 ; i--) {
                let innerText = newCellDoms[i].innerText.trim();
                if(innerText.length === 0) {
                    newRowDom.removeChild(newCellDoms[i])
                }else {
                    newCellDoms[i].style.removeProperty('width');
                }
            }
        }

        // Summary row is inside the docked summaryBar Component 
        if (dock) {
            p = me.summaryBar.item.dom.firstChild;
            oldRowDom = p.firstChild;

            p.insertBefore(newRowDom, oldRowDom);
            p.removeChild(oldRowDom);
        }
        // Summary row is a regular row in a THEAD inside the View. 
        // Downlinked through the summary record's ID 
        else {
            oldRowDom = view.el.down(selector, true);
            p = oldRowDom && oldRowDom.parentNode;

            if (p) {
                p.removeChild(oldRowDom);
            }

            // We're always inserting the new summary row into the last rendered row, 
            // unless no rows exist. In that case we will be appending to the special 
            // placeholder in the node container. 
            p = view.getRow(view.all.last());

            if (p) {
                p = p.parentElement;
            }
            // View might not have nodeContainer yet. 
            else {
                p = me.getSummaryRowPlaceholder(view);
                p = p && p.tBodies && p.tBodies[0];
            }

            if (p) {
                p.appendChild(newRowDom);
            }
        }
    },

    // Synchronize column widths in the docked summary Component or the inline summary row 
    // depending on whether we are docked or not. 
    afterHeaderCtLayout: function (headerCt) {
        var me = this,
            view = me.view,
            columns = view.getVisibleColumnManager().getColumns(),
            column,
            len = columns.length,
            i,
            summaryEl,
            el, width, innerCt;

        if (me.showSummaryRow && view.refreshCounter) {
            if(me.fixed) {
                return;
            }
            if (me.dock) {
                summaryEl = me.summaryBar.el;
                width = headerCt.getTableWidth();
                innerCt = me.summaryBar.innerCt;

                // Stretch the innerCt of the summary bar upon headerCt layout 
                me.summaryBar.item.setWidth(width);

                // headerCt's tooNarrow flag is set by its layout if the columns overflow. 
                // Must not measure+set in after layout phase, this is a write phase. 
                if (headerCt.tooNarrow) {
                    width += Ext.getScrollbarSize().width;
                }
                innerCt.setWidth(width);
            } else {
                summaryEl = Ext.fly(Ext.fly(view.getNodeContainer()).down('.' + me.summaryItemCls, true));
            }

            // If the layout was in response to a clearView, there'll be no summary element 
            if (summaryEl) {
                for (i = 0; i < len; i++) {
                    column = columns[i];
                    el = summaryEl.down(view.getCellSelector(column), true);
                    if (el) {
                        Ext.fly(el).setWidth(column.width || (column.lastBox ? column.lastBox.width : 100));
                    }
                }
            }
        }
    },
});