/**
 * @class Ext.grid.plugin.CellEditing
 * @extends Ext.grid.plugin.Editing
 *
 * The Ext.grid.plugin.CellEditing plugin injects editing at a cell level for a Grid. Only a single
 * cell will be editable at a time. The field that will be used for the editor is defined at the
 * {@link Ext.grid.column.Column#field field}. The editor can be a field instance or a field configuration.
 *
 * If an editor is not specified for a particular column then that cell will not be editable and it will
 * be skipped when activated via the mouse or the keyboard.
 *
 * The editor may be shared for each column in the grid, or a different one may be specified for each column.
 * An appropriate field type should be chosen to match the data structure that it will be editing. For example,
 * to edit a date, it would be useful to specify {@link Ext.form.field.Date} as the editor.
 *
 * {@img Ext.grid.plugin.CellEditing/Ext.grid.plugin.CellEditing.png Ext.grid.plugin.CellEditing plugin}
 *
 * ## Example Usage
 *
 *     Ext.create('Ext.data.Store', {
 *         storeId:'simpsonsStore',
 *         fields:['name', 'email', 'phone'],
 *         data:{'items':[
 *             {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
 *             {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
 *             {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
 *             {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
 *         ]},
 *         proxy: {
 *             type: 'memory',
 *             reader: {
 *                 type: 'json',
 *                 root: 'items'
 *             }
 *         }
 *     });
 *     
 *     Ext.create('Ext.grid.Panel', {
 *         title: 'Simpsons',
 *         store: Ext.data.StoreManager.lookup('simpsonsStore'),
 *         columns: [
 *             {header: 'Name',  dataIndex: 'name', field: 'textfield'},
 *             {header: 'Email', dataIndex: 'email', flex:1,
 *                 editor: {
 *                     xtype:'textfield',
 *                     allowBlank:false
 *                 }
 *             },
 *             {header: 'Phone', dataIndex: 'phone'}
 *         ],
 *         selType: 'cellmodel',
 *         plugins: [
 *             Ext.create('Ext.grid.plugin.CellEditing', {
 *                 clicksToEdit: 1
 *             })
 *         ],
 *         height: 200,
 *         width: 400,
 *         renderTo: Ext.getBody()
 *     });
 */
Ext.define('Ext.grid.plugin.CellEditing', {
    alias: 'plugin.cellediting',
    extend: 'Ext.grid.plugin.Editing',
    requires: ['Ext.grid.CellEditor'],

    constructor: function() {
        /**
         * @event beforeedit
         * Fires before cell editing is triggered. The edit event object has the following properties <br />
         * <ul style="padding:5px;padding-left:16px;">
         * <li>grid - The grid</li>
         * <li>record - The record being edited</li>
         * <li>field - The field name being edited</li>
         * <li>value - The value for the field being edited.</li>
         * <li>row - The grid table row</li>
         * <li>column - The grid {@link Ext.grid.column.Column Column} defining the column that is being edited.</li>
         * <li>rowIdx - The row index that is being edited</li>
         * <li>colIdx - The column index that is being edited</li>
         * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
         * </ul>
         * @param {Ext.grid.plugin.Editing} editor
         * @param {Object} e An edit event (see above for description)
         */
        /**
         * @event edit
         * Fires after a cell is edited. The edit event object has the following properties <br />
         * <ul style="padding:5px;padding-left:16px;">
         * <li>grid - The grid</li>
         * <li>record - The record that was edited</li>
         * <li>field - The field name that was edited</li>
         * <li>value - The value being set</li>
         * <li>originalValue - The original value for the field, before the edit.</li>
         * <li>row - The grid table row</li>
         * <li>column - The grid {@link Ext.grid.column.Column Column} defining the column that was edited.</li>
         * <li>rowIdx - The row index that was edited</li>
         * <li>colIdx - The column index that was edited</li>
         * </ul>
         *
         * <pre><code>
grid.on('edit', onEdit, this);

function onEdit(e) {
    // execute an XHR to send/commit data to the server, in callback do (if successful):
    e.record.commit();
};
         * </code></pre>
         * @param {Ext.grid.plugin.Editing} editor
         * @param {Object} e An edit event (see above for description)
         */
        /**
         * @event validateedit
         * Fires after a cell is edited, but before the value is set in the record. Return false
         * to cancel the change. The edit event object has the following properties <br />
         * <ul style="padding:5px;padding-left:16px;">
         * <li>grid - The grid</li>
         * <li>record - The record being edited</li>
         * <li>field - The field name being edited</li>
         * <li>value - The value being set</li>
         * <li>originalValue - The original value for the field, before the edit.</li>
         * <li>row - The grid table row</li>
         * <li>column - The grid {@link Ext.grid.column.Column Column} defining the column that is being edited.</li>
         * <li>rowIdx - The row index that is being edited</li>
         * <li>colIdx - The column index that is being edited</li>
         * <li>cancel - Set this to true to cancel the edit or return false from your handler.</li>
         * </ul>
         * Usage example showing how to remove the red triangle (dirty record indicator) from some
         * records (not all).  By observing the grid's validateedit event, it can be cancelled if
         * the edit occurs on a targeted row (for example) and then setting the field's new value
         * in the Record directly:
         * <pre><code>
grid.on('validateedit', function(e) {
  var myTargetRow = 6;

  if (e.row == myTargetRow) {
    e.cancel = true;
    e.record.data[e.field] = e.value;
  }
});
         * </code></pre>
         * @param {Ext.grid.plugin.Editing} editor
         * @param {Object} e An edit event (see above for description)
         */
        this.callParent(arguments);
        this.editors = Ext.create('Ext.util.MixedCollection', false, function(editor) {
            return editor.editorId;
        });
    },

    /**
     * @private
     * AbstractComponent calls destroy on all its plugins at destroy time.
     */
    destroy: function() {
        var me = this;
        me.editors.each(Ext.destroy, Ext);
        me.editors.clear();
        me.callParent(arguments);
    },
    
    onBodyScroll: function() {
        var ed = this.getActiveEditor();
        if (ed && ed.field) {
            if (ed.field.triggerBlur) {
                ed.field.triggerBlur();
            } else {
                ed.field.blur();
            }
        }
    },

    // private
    // Template method called from base class's initEvents
    initCancelTriggers: function() {
        var me   = this,
            grid = me.grid,
            view = grid.view;
            
        view.addElListener('mousewheel', me.cancelEdit, me);
        me.mon(view, 'bodyscroll', me.onBodyScroll, me);
        me.mon(grid, {
            columnresize: me.cancelEdit,
            columnmove: me.cancelEdit,
            scope: me
        });
    },

    /**
     * Start editing the specified record, using the specified Column definition to define which field is being edited.
     * @param {Model} record The Store data record which backs the row to be edited.
     * @param {Model} columnHeader The Column object defining the column to be edited.
     * @override
     */
    startEdit: function(record, columnHeader) {
        var me = this,
            ed   = me.getEditor(record, columnHeader),
            value = record.get(columnHeader.dataIndex),
            context = me.getEditingContext(record, columnHeader);

        record = context.record;
        columnHeader = context.column;

        // Complete the edit now, before getting the editor's target
        // cell DOM element. Completing the edit causes a view refresh.
        me.completeEdit();

        // See if the field is editable for the requested record
        if (columnHeader && !columnHeader.getEditor(record)) {
            return false;
        }

        if (ed) {
            context.originalValue = context.value = value;
            if (me.beforeEdit(context) === false || me.fireEvent('beforeedit', context) === false || context.cancel) {
                return false;
            }

            me.context = context;
            me.setActiveEditor(ed);
            me.setActiveRecord(record);
            me.setActiveColumn(columnHeader);

            // Defer, so we have some time between view scroll to sync up the editor
            Ext.defer(ed.startEdit, 15, ed, [me.getCell(record, columnHeader), value]);
        } else {
            // BrowserBug: WebKit & IE refuse to focus the element, rather
            // it will focus it and then immediately focus the body. This
            // temporary hack works for Webkit and IE6. IE7 and 8 are still
            // broken
            me.grid.getView().el.focus((Ext.isWebKit || Ext.isIE) ? 10 : false);
        }
    },

    completeEdit: function() {
        var activeEd = this.getActiveEditor();
        if (activeEd) {
            activeEd.completeEdit();
        }
    },

    // internal getters/setters
    setActiveEditor: function(ed) {
        this.activeEditor = ed;
    },

    getActiveEditor: function() {
        return this.activeEditor;
    },

    setActiveColumn: function(column) {
        this.activeColumn = column;
    },

    getActiveColumn: function() {
        return this.activeColumn;
    },

    setActiveRecord: function(record) {
        this.activeRecord = record;
    },

    getActiveRecord: function() {
        return this.activeRecord;
    },

    getEditor: function(record, column) {
        var me = this,
            editors = me.editors,
            editorId = column.itemId || column.id,
            editor = editors.getByKey(editorId);

        if (editor) {
            return editor;
        } else {
            editor = column.getEditor(record);
            if (!editor) {
                return false;
            }

            // Allow them to specify a CellEditor in the Column
            if (!(editor instanceof Ext.grid.CellEditor)) {
                editor = Ext.create('Ext.grid.CellEditor', {
                    editorId: editorId,
                    field: editor
                });
            }
            editor.parentEl = me.grid.getEditorParent();
            // editor.parentEl should be set here.
            editor.on({
                scope: me,
                specialkey: me.onSpecialKey,
                complete: me.onEditComplete,
                canceledit: me.cancelEdit
            });
            editors.add(editor);
            return editor;
        }
    },

    /**
     * Get the cell (td) for a particular record and column.
     * @param {Ext.data.Model} record
     * @param {Ext.grid.column.Colunm} column
     * @private
     */
    getCell: function(record, column) {
        return this.grid.getView().getCell(record, column);
    },

    onSpecialKey: function(ed, field, e) {
        var grid = this.grid,
            sm;
        if (e.getKey() === e.TAB) {
            e.stopEvent();
            sm = grid.getSelectionModel();
            if (sm.onEditorTab) {
                sm.onEditorTab(this, e);
            }
        }
    },

    onEditComplete : function(ed, value, startValue) {
        var me = this,
            grid = me.grid,
            sm = grid.getSelectionModel(),
            activeColumn = me.getActiveColumn(),
            dataIndex;

        if (activeColumn) {
            dataIndex = activeColumn.dataIndex;

            me.setActiveEditor(null);
            me.setActiveColumn(null);
            me.setActiveRecord(null);
            delete sm.wasEditing;
    
            if (!me.validateEdit()) {
                return;
            }
            // Only update the record if the new value is different than the
            // startValue, when the view refreshes its el will gain focus
            if (value !== startValue) {
                me.context.record.set(dataIndex, value);
            // Restore focus back to the view's element.
            } else {
                grid.getView().el.focus();
            }
            me.context.value = value;
            me.fireEvent('edit', me, me.context);
            

        }
    },

    /**
     * Cancel any active editing.
     */
    cancelEdit: function() {
        var me = this,
            activeEd = me.getActiveEditor(),
            viewEl = me.grid.getView().el;

        me.setActiveEditor(null);
        me.setActiveColumn(null);
        me.setActiveRecord(null);
        if (activeEd) {
            activeEd.cancelEdit();
            viewEl.focus();
        }
    },

    /**
     * Starts editing by position (row/column)
     * @param {Object} position A position with keys of row and column.
     */
    startEditByPosition: function(position) {
        var me = this,
            grid = me.grid,
            sm = grid.getSelectionModel(),
            editRecord = grid.store.getAt(position.row),
            editColumnHeader = grid.headerCt.getHeaderAtIndex(position.column);

        if (sm.selectByPosition) {
            sm.selectByPosition(position);
        }
        me.startEdit(editRecord, editColumnHeader);
    }
});