/**
 * The rowbody feature enhances the grid's markup to have an additional
 * tr -> td -> div which spans the entire width of the original row.
 *
 * This is useful to to associate additional information with a particular
 * record in an Ext.grid.Grid.
 *
 * Rowbodies are initially hidden unless you override {@link #getAdditionalData}.
 *
 * The events fired by RowBody are relayed to the owning 
 * {@link Ext.view.Table grid view} (and subsequently the owning grid).
 *
 * # Example
 *
 *     @example
 *     Ext.define('Animal', {
 *         extend: 'Ext.data.Model',
 *         fields: ['name', 'latin', 'desc', 'lifespan']
 *     });
 *     
 *     Ext.create('Ext.grid.Panel', {
 *         width: 400,
 *         height: 300,
 *         renderTo: Ext.getBody(),
 *         store: {
 *             model: 'Animal',
 *             data: [{
 *                 name: 'Tiger',
 *                 latin: 'Panthera tigris',
 *                 desc: 'The largest cat species, weighing up to 306 kg (670 lb).',
 *                 lifespan: '20 - 26 years (in captivity)'
 *             }, {
 *                 name: 'Roman snail',
 *                 latin: 'Helix pomatia',
 *                 desc: 'A species of large, edible, air-breathing land snail.',
 *                 lifespan: '20 - 35 years'
 *             }, {
 *                 name: 'Yellow-winged darter',
 *                 latin: 'Sympetrum flaveolum',
 *                 desc: 'A dragonfly found in Europe and mid and Northern China.',
 *                 lifespan: '4 - 6 weeks'
 *             }, {
 *                 name: 'Superb Fairy-wren',
 *                 latin: 'Malurus cyaneus',
 *                 desc: 'Common and familiar across south-eastern Australia.',
 *                 lifespan: '5 - 6 years'
 *             }]
 *         },
 *         columns: [{
 *             dataIndex: 'name',
 *             text: 'Common name',
 *             width: 125
 *         }, {
 *             dataIndex: 'latin',
 *             text: 'Scientific name',
 *             flex: 1
 *         }],
 *         features: [{
 *             ftype: 'rowbody',
 *             getAdditionalData: function(data, idx, record, orig) {
 *                 // Usually you would style the my-body-class in a CSS file
 *                 return {
 *                     rowBody: '<div style="padding: 1em">' + record.get("desc") + '</div>',
 *                     rowBodyCls: "my-body-class"
 *                 };
 *             }
 *         }],
 *         listeners: {
 *             rowbodyclick: function(view, rowEl, e, eOpts) {
 *                 var itemEl = Ext.get(rowEl).up(view.itemSelector),
 *                     rec = view.getRecord(itemEl);
 *                 
 *                 Ext.Msg.alert(rec.get('name') + ' life span', rec.get('lifespan'));
 *             }
 *         }
 *     });
 *
 *  # Cell Editing and Cell Selection Model
 *
 * Note that if {@link Ext.grid.plugin.CellEditing cell editing} or the
 * {@link Ext.selection.CellModel cell selection model} are going to be used, then the
 * {@link Ext.grid.feature.RowBody RowBody} feature, or
 * {@link Ext.grid.plugin.RowExpander RowExpander} plugin MUST be used for intra-cell navigation
 * to be correct.
 *
 * **Note:** The {@link Ext.grid.plugin.RowExpander rowexpander} plugin and the rowbody
 * feature are exclusive and cannot both be set on the same grid / tree.
 */
Ext.define('Ext.grid.feature.RowBody', {
    extend: 'Ext.grid.feature.Feature',
    alias: 'feature.rowbody',
 
    rowBodyCls: Ext.baseCSSPrefix + 'grid-row-body',
    innerSelector: '.' + Ext.baseCSSPrefix + 'grid-rowbody',
    rowBodyHiddenCls: Ext.baseCSSPrefix + 'grid-row-body-hidden',
    rowBodyTdSelector: 'td.' + Ext.baseCSSPrefix + 'grid-cell-rowbody',
    eventPrefix: 'rowbody',
    eventSelector: 'tr.' + Ext.baseCSSPrefix + 'grid-rowbody-tr',
 
    /**
     * @cfg {Boolean} [bodyBefore=false]
     * Configure as `true` to put the row expander body *before* the data row.
     */
    bodyBefore: false,
 
    outerTpl: {
        fn: function(out, values, parent) {
            var me = this.rowBody,
                view = values.view,
                columns = view.getVisibleColumnManager().getColumns(),
                rowValues = view.rowValues,
                rowExpanderCol = me.rowExpander && me.rowExpander.expanderColumn;
 
            rowValues.rowBodyColspan = columns.length;
            rowValues.rowBodyCls = me.rowBodyCls;
            rowValues.rowIdCls = me.rowIdCls;
            
            if (rowExpanderCol && rowExpanderCol.getView() === view) {
                view.grid.removeCls(Ext.baseCSSPrefix + 'grid-hide-row-expander-spacer');
                rowValues.addSpacerCell = true;
                rowValues.rowBodyColspan -= 1;
                rowValues.spacerCellCls = Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix +
                                          'grid-row-expander-spacer ' + Ext.baseCSSPrefix +
                                          'grid-cell-special';
            }
            else {
                view.grid.addCls(Ext.baseCSSPrefix + 'grid-hide-row-expander-spacer');
                rowValues.addSpacerCell = false;
            }
 
            this.nextTpl.applyOut(values, out, parent);
 
            rowValues.rowBodyCls = rowValues.rowBodyColspan = rowValues.rowBody = null;
        },
        priority: 100
    },
 
    /* eslint-disable indent, max-len */
    extraRowTpl: [
        '{%',
            'if(this.rowBody.bodyBefore) {',
                // MUST output column sizing elements because the first row in this table
                // contains one colspanning TD, and that overrides subsequent column width settings.
                'values.view.renderColumnSizer(values, out);',
            '} else {',
                'this.nextTpl.applyOut(values, out, parent);',
            '}',
            'values.view.rowBodyFeature.setupRowData(values.record, values.recordIndex, values);',
        '%}',
        '<tr class="' + Ext.baseCSSPrefix + 'grid-rowbody-tr {rowBodyCls} {rowIdCls}" {ariaRowAttr}>',
            '<tpl if="addSpacerCell">',
                '<td class="{spacerCellCls}"></td>',
            '</tpl>',
            '<td class="' + Ext.baseCSSPrefix + 'grid-td ' + Ext.baseCSSPrefix + 'grid-cell-rowbody" colspan="{rowBodyColspan}" {ariaCellAttr}>',
                '<div class="' + Ext.baseCSSPrefix + 'grid-rowbody {rowBodyDivCls}" {ariaCellInnerAttr}>{rowBody}</div>',
            '</td>',
        '</tr>',
        '{%',
            'if(this.rowBody.bodyBefore) {',
                'this.nextTpl.applyOut(values, out, parent);',
            '}',
        '%}', {
            priority: 100,
 
            beginRowSync: function(rowSync) {
                rowSync.add('rowBody', this.owner.eventSelector);
            },
 
            syncContent: function(destRow, sourceRow, columnsToUpdate) {
                var rowBody = this.rowBody,
                    destRowBody, sourceRowBody;
 
                if (rowBody.doSync) {
                    destRowBody = Ext.fly(destRow).down(rowBody.eventSelector, true);
                    
                    // Sync the heights of row body elements in each row if they need it.
                    if (destRowBody && (sourceRowBody = Ext.fly(sourceRow).down(rowBody.eventSelector, true))) {
                        Ext.fly(destRowBody).syncContent(sourceRowBody);
                    }
                }
            }
        }
    ],
    /* eslint-enable indent, max-len */
 
    doSync: true,
 
    init: function(grid) {
        var me = this,
            view = me.view = grid.getView();
 
        // <debug>
        if (!me.rowExpander && grid.findPlugin('rowexpander')) {
            Ext.raise('The RowBody feature shouldn\'t be manually added when the grid' +
                      'has a RowExpander.');
        }
        // </debug>
 
        // The extra data means variableRowHeight
        grid.variableRowHeight = view.variableRowHeight = true;
        view.rowBodyFeature = me;
 
        view.headerCt.on({
            columnschanged: me.onColumnsChanged,
            scope: me
        });
        
        view.addTpl(me.outerTpl).rowBody = me;
        view.addRowTpl(Ext.XTemplate.getTpl(this, 'extraRowTpl')).rowBody = me;
        
        me.callParent(arguments);
    },
 
    getSelectedRow: function(view, rowIndex) {
        var selectedRow = view.getNode(rowIndex);
        
        if (selectedRow) {
            return Ext.fly(selectedRow).down(this.eventSelector);
        }
        
        return null;
    },
 
    // When columns added/removed, keep row body colspan in sync with number of columns.
    onColumnsChanged: function(headerCt) {
        var view = this.view,
            items, colspan, len, i;
 
        if (!view.rendered) {
            return;
        }
 
        items = view.el.query(this.rowBodyTdSelector);
        colspan = headerCt.getVisibleGridColumns().length;
        len = items.length;
 
        for (= 0; i < len; ++i) {
            items[i].setAttribute('colSpan', colspan);
        }
    },
 
    /**
     * @method getAdditionalData
     * @protected
     * @template
     * Provides additional data to the prepareData call within the grid view.
     * The rowbody feature adds 3 additional variables into the grid view's template.
     * These are `rowBody`, `rowBodyCls`, and `rowBodyColspan`.
     * 
     *  - **rowBody:** *{String}* The HTML to display in the row body element.  Defaults 
     * to *undefined*.
     *  - **rowBodyCls:** *{String}* An optional CSS class (or multiple classes 
     * separated by spaces) to apply to the row body element.  Defaults to 
     * {@link #rowBodyCls}.
     *  - **rowBodyColspan:** *{Number}* The number of columns that the row body element 
     * should span.  Defaults to the number of visible columns.
     * 
     * @param {Object} data The data for this particular record.
     * @param {Number} idx The row index for this record.
     * @param {Ext.data.Model} record The record instance
     * @param {Object} orig The original result from the prepareData call to massage.
     * @return {Object} An object containing additional variables for use in the grid 
     * view's template
     */
    
    /*
     * @private
     */
    setupRowData: function(record, rowIndex, rowValues) {
        if (this.getAdditionalData) {
            Ext.apply(rowValues, this.getAdditionalData(record.data, rowIndex, record, rowValues));
        }
    }
    
    /**
     * @event beforerowbodymousedown
     * @preventable
     * @member Ext.view.Table
     * Fires before the mousedown event on a row body element is processed. Return false 
     * to cancel the default action.
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @param {Ext.view.View} view The rowbody's owning View
     * @param {HTMLElement} rowBodyEl The row body's element
     * @param {Ext.event.Event} e The raw event object
     */
 
    /**
     * @event beforerowbodymouseup
     * @preventable
     * @member Ext.view.Table
     * Fires before the mouseup event on a row body element is processed. Return false 
     * to cancel the default action.
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event beforerowbodyclick
     * @preventable
     * @member Ext.view.Table
     * Fires before the click event on a row body element is processed. Return false to 
     * cancel the default action.
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event beforerowbodydblclick
     * @preventable
     * @member Ext.view.Table
     * Fires before the dblclick event on a row body element is processed. Return false 
     * to cancel the default action.
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event beforerowbodycontextmenu
     * @preventable
     * @member Ext.view.Table
     * Fires before the contextmenu event on a row body element is processed. Return 
     * false to cancel the default action.
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
    
    /**
     * @event beforerowbodylongpress
     * @preventable
     * @member Ext.view.Table
     * Fires before the longpress event on a row body element is processed. Return 
     * false to cancel the default action.
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event beforerowbodykeydown
     * @preventable
     * @member Ext.view.Table
     * Fires before the keydown event on a row body element is processed. Return false 
     * to cancel the default action.
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event beforerowbodykeyup
     * @preventable
     * @member Ext.view.Table
     * Fires before the keyup event on a row body element is processed. Return false to 
     * cancel the default action.
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event beforerowbodykeypress
     * @preventable
     * @member Ext.view.Table
     * Fires before the keypress event on a row body element is processed. Return false 
     * to cancel the default action.
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event rowbodymousedown
     * @member Ext.view.Table
     * Fires when there is a mouse down on a row body element
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event rowbodymouseup
     * @member Ext.view.Table
     * Fires when there is a mouse up on a row body element
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event rowbodyclick
     * @member Ext.view.Table
     * Fires when a row body element is clicked
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event rowbodydblclick
     * @member Ext.view.Table
     * Fires when a row body element is double clicked
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event rowbodycontextmenu
     * @member Ext.view.Table
     * Fires when a row body element is right clicked
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
    
    /**
     * @event rowbodylongpress
     * @member Ext.view.Table
     * Fires on a row body element longpress event
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event rowbodykeydown
     * @member Ext.view.Table
     * Fires when a key is pressed down while a row body element is currently selected
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event rowbodykeyup
     * @member Ext.view.Table
     * Fires when a key is released while a row body element is currently selected
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
 
    /**
     * @event rowbodykeypress
     * @member Ext.view.Table
     * Fires when a key is pressed while a row body element is currently selected.
     * 
     * **Note:** This event is fired only when the Ext.grid.feature.RowBody feature is 
     * used.
     * 
     * @inheritdoc #beforerowbodymousedown
     */
});