/**
 * The Editor class is used to provide inline editing for elements on the page. The editor
 * is backed by a {@link Ext.field.Field} that will be displayed to edit the underlying content.
 * The editor is a floating Component, when the editor is shown it is automatically aligned to
 * display over the top of the bound element it is editing. The Editor contains several options
 * for how to handle key presses:
 *
 * - {@link #completeOnEnter}
 * - {@link #cancelOnEsc}
 * - {@link #swallowKeys}
 *
 * It also has options for how to use the value once the editor has been activated:
 *
 * - {@link #revertInvalid}
 * - {@link #ignoreNoChange}
 * - {@link #updateEl}
 *
 * Sample usage:
 *
 * ```javascript
 * @example({ framework: 'extjs' })
 * var form = Ext.create('Ext.form.Panel', {
 *     renderTo: Ext.getBody(),
 *     width: 380,
 *     height: 400,
 *     title: 'User Details',
 *     bodyPadding: 10,
 *     items: [{
 *         html: 'Double-Click on the header title, this, or the field label to edit',
 *         height:30
 *     },{
 *         label: 'First Name',
 *         name: 'firstname',
 *         xtype: 'textfield'
 *     }]
 * });
 *
 * var editor = new Ext.Editor({
 *     // update the innerHTML of the bound element 
 *     // when editing completes
 *     updateEl: true,
 *     alignment: 'l-l',
 *     autoSize: {
 *         width: 'boundEl'
 *     },
 *     field: {
 *         xtype: 'textfield'
 *     }
 * });
 *
 * form.header.getTitle().textEl.on('dblclick', function(e, t) {
 *     editor.startEdit(t);
 * });
 *
 * form.getTargetEl().on('dblclick', function(e, t) {
 *     editor.startEdit(t);
 *     // Manually focus, since clicking on the label will focus the text field
 *     editor.getField().focus(50, true);
 * });
 *
 * ```
 * {@img Ext.Editor/Ext.Editor.png Ext.Editor component}
 *
 */
Ext.define('Ext.Editor', {
    extend: 'Ext.Container',
    xtype: 'editor',
 
    isEditor: true,
 
    config: {
        /**
         * @cfg {Object} field
         * Config object for a {@link Ext.field.Field}
         */
        field: {
            xtype: 'textfield'
        }
    },
 
    floated: true,
 
    /**
     * @cfg {Boolean} allowBlur
     * True to {@link #completeEdit complete the editing process} if in edit mode when focus exits
     * from this Editor's hierarchy.
     */
    allowBlur: true,
 
    /**
     * @cfg {Boolean} revertInvalid
     * True to automatically revert the field value and cancel the edit when the user completes an
     * edit and the field
     * validation fails
     */
    revertInvalid: true,
 
    /**
     * @cfg {Boolean} [ignoreNoChange=false]
     * True to skip the edit completion process (no save, no events fired) if the user completes an
     * edit and the value has not changed.  Applies only to string values - edits for other data
     * types will never be ignored.
     */
 
    /**
     * @cfg {Boolean} [hideEl=true]
     * False to keep the bound element visible while the editor is displayed
     */
    hideEl: true,
 
    /**
     * @cfg {Object} value
     * The data value of the underlying field
     */
    value: '',
 
    /**
     * @cfg {String} [alignment=c-c]
     * The position to align to (see {@link Ext.util.Positionable#alignTo} for more details).
     */
    alignment: 'c-c?',
 
    /**
     * @cfg {Number[]} offset
     * The offset to use when aligning (see {@link Ext.util.Positionable#alignTo} for more details.
     */
    offset: [0, 0],
 
    /**
     * @cfg {Boolean/String} shadow
     * "sides" for sides/bottom only, "frame" for 4-way shadow, and "drop" for bottom-right shadow.
     */
    shadow: 'frame',
 
    /**
     * @cfg {Boolean} constrain
     * True to constrain the editor to the viewport
     */
    constrain: false,
 
    /**
     * @cfg {Boolean} swallowKeys
     * Handle the keydown/keypress events so they don't propagate
     */
    swallowKeys: true,
 
    /**
     * @cfg {Boolean} completeOnEnter
     * True to complete the edit when the enter key is pressed.
     */
    completeOnEnter: true,
 
    /**
     * @cfg {Boolean} cancelOnEsc
     * True to cancel the edit when the escape key is pressed.
     */
    cancelOnEsc: true,
 
    /**
     * @cfg {Boolean} cancelOnClear
     * True to cancel edit when the clear icon of a field is pressed
     */
    cancelOnClear: false,
 
    /**
     * @cfg {Boolean} updateEl
     * True to update the innerHTML of the bound element when the update completes
     */
    updateEl: false,
 
    // Do not participate in the ZIndexManager's focus switching operations.
    // When an editor is hidden, the ZIndexManager will not automatically activate
    // the last visible floater on the stack.
    focusOnToFront: false,
 
    /**
     * @cfg {String/HTMLElement/Ext.dom.Element} [parentEl=document.body]
     * An element to render to.
     */
 
    baseCls: Ext.baseCSSPrefix + 'editor',
 
    /**
     * @property {Boolean} editing
     * True if this editor is currently active.
     * @readonly
     */
    editing: false,
 
    /**
     * @event beforestartedit
     * Fires when editing is initiated, but before the value changes.  Editing can be canceled by
     * returning false from the handler of this event.
     * @param {Ext.Editor} this 
     * @param {Ext.dom.Element} boundEl The underlying element bound to this editor
     * @param {Object} value The field value being set
     */
 
    /**
     * @event startedit
     * Fires when this editor is displayed
     * @param {Ext.Editor} this 
     * @param {Ext.dom.Element} boundEl The underlying element bound to this editor
     * @param {Object} value The starting field value
     */
 
    /**
     * @event beforecomplete
     * Fires after a change has been made to the field, but before the change is reflected in the
     * underlying field.  Saving the change to the field can be canceled by returning false from
     * the handler of this event. Note that if the value has not changed and ignoreNoChange = true,
     * the editing will still end but this event will not fire since no edit actually occurred.
     * @param {Ext.Editor} this 
     * @param {Object} value The current field value
     * @param {Object} startValue The original field value
     */
 
    /**
     * @event complete
     * Fires after editing is complete and any changed value has been written to the underlying
     * field.
     * @param {Ext.Editor} this 
     * @param {Object} value The current field value
     * @param {Object} startValue The original field value
     */
 
    /**
     * @event canceledit
     * Fires after editing has been canceled and the editor's value has been reset.
     * @param {Ext.Editor} this 
     * @param {Object} value The user-entered field value that was discarded
     * @param {Object} startValue The original field value that was set back into the editor after
     * cancel
     */
 
    /**
     * @event specialkey
     * Fires when any key related to navigation (arrows, tab, enter, esc, etc.) is pressed. You can
     * check
     * {@link Ext.event.Event#getKey} to determine which key was pressed.
     * @param {Ext.Editor} this 
     * @param {Ext.form.field.Field} field The field attached to this editor
     * @param {Ext.event.Event} event The event object
     */
 
    preventDefaultAlign: true,
    useBoundValue: true,
    specialKeyDelay: 1,
 
    /**
     * @cfg {Boolean} matchFont
     * Determines if the editor input should match the font style of the target element
     */
    matchFont: false,
 
    /**
     * @method
     * @protected
     * @returns {Ext.grid.Location} The location where editing is active *if* editing is
     * active, else `null`.
     */
    getLocation: Ext.emptyFn,
 
    beforeEdit: function(el, value) {
        return this.fireEvent('beforestartedit', this, el, value, this.getLocation());
    },
 
    applyField: function(config) {
        return Ext.widget(config);
    },
 
    updateField: function(newField, oldField) {
        var me = this,
            inputEl;
 
        if (oldField) {
            me.remove(oldField, true);
            oldField.un({
                specialkey: 'onSpecialKey',
                clearicontap: 'onFieldClear',
                scope: this
            });
 
            me._fieldSwallower = Ext.destroy(me._fieldSwallower);
        }
 
        if (newField) {
            inputEl = newField.inputElement;
            me.add(newField);
            newField.on({
                specialkey: 'onSpecialKey',
                clearicontap: 'onFieldClear',
                scope: this
            });
 
            if (me.swallowKeys) {
                me._fieldSwallower = inputEl.swallowEvent([
                    'keypress', // *** Opera
                    'keydown'   // *** all other browsers
                ]);
            }
        }
    },
 
    onAdded: function(container) {
        // Editors are floaters and shouldn't have an ownerCt, so use ownerCmp as
        // the upward link.
        this.ownerCmp = container;
        this.callParent(arguments);
    },
 
    /**
     * @private
     */
    onSpecialKey: function(field, event) {
        var me = this,
            key = event.getKey(),
            complete = me.completeOnEnter && key === event.ENTER,
            cancel = me.cancelOnEsc && key === event.ESC,
            task = me.specialKeyTask;
 
        if (!event.fromBoundList && (complete || cancel)) {
            event.stopEvent();
 
            if (!task) {
                me.specialKeyTask = task = new Ext.util.DelayedTask();
            }
 
            // Must defer this slightly to prevent exiting edit mode before the field's own
            // key nav can handle the enter key, e.g. selecting an item in a combobox list
            task.delay(me.specialKeyDelay, complete ? me.completeEdit : me.cancelEdit, me);
            //<debug>
 
            // Makes unit testing easier
            if (me.specialKeyDelay === 0) {
                task.cancel();
 
                if (complete) {
                    me.completeEdit();
                }
                else {
                    me.cancelEdit();
                }
            }
            //</debug>
        }
 
        me.fireEvent('specialkey', me, field, event);
    },
 
    /**
     * Starts the editing process and shows the editor.
     * @param {String/HTMLElement/Ext.dom.Element} el The element to edit
     * @param {String} [value] A value to initialize the editor with. If a value is not
     * provided, it defaults to the innerHTML of el.
     * @param [doFocus] (private)
     */
    startEdit: function(el, value, doFocus) {
        var me = this,
            field = me.getField(),
            dom, font;
 
        if (!me.allowBlur && me.editing) {
            me.toggleBoundEl(true);
        }
 
        me.completeEdit(true);
        me.boundEl = el = Ext.get(el);
        dom = me.boundEl.dom;
 
        if (me.useBoundValue && !Ext.isDefined(value)) {
            value = Ext.String.trim(dom.textContent || dom.innerText || dom.innerHTML);
        }
 
        if (me.beforeEdit(el, value) !== false) {
            if (me.context) {
                // Grab the value again, may have changed in beforestartedit
                value = me.context.value;
            }
 
            if (me.matchFont) {
                font = el.getStyle('font');
 
                if (!font) {
                    font = el.getStyle('fontWeight') + ' ' + el.getStyle(
                        'fontSize') + '/' + el.getStyle('lineHeight') + ' ' + el.getStyle(
                        'fontFamily');
                }
 
                field.inputElement.setStyle('font', font);
            }
 
            me.startValue = value;
            me.show();
 
            // forces editor to use absolute position for proper alignment
            if (!me.getFloated()) {
                me.setTop(0);
            }
 
            me.realign();
 
            // temporarily suspend events on field to prevent the "change" event from firing when
            // resetOriginalValue() and setValue() are called
            field.suspendEvents();
            field.setValue(value);
            field.resetOriginalValue();
            field.resumeEvents();
 
            if (doFocus !== false) {
                field.focus(field.selectOnFocus ? true : [Number.MAX_VALUE]);
            }
 
            me.toggleBoundEl(false);
            me.editing = true;
        }
    },
 
    /**
     * Realigns the editor to the bound field based on the current alignment config value.
     */
    realign: function() {
        var me = this;
 
        // Editors must not be affected by the Ext.Widget.floatInset setting, so calculate
        // a constraining Region.
        me.setConstrainAlign(Ext.getBody().getConstrainRegion());
        me.alignTo(me.boundEl, me.alignment, { offset: me.offset });
    },
 
    /**
     * Ends the editing process, persists the changed value to the underlying field, and hides the
     * editor.
     * @param {Boolean} [remainVisible=false] Override the default behavior and keep the editor
     * visible after edit
     * @param {Boolean} [followItem] (private) Pass `true` to ensure the item remains visible,
     * that is, the component that contains the editor. This is used by grid cell editing to
     * track the item (i.e., the row component) since it may move due to edit of sorted fields.
     */
    completeEdit: function(remainVisible, followItem) {
        var me = this,
            field = me.getField(),
            startValue = me.startValue,
            cancel = me.context && me.context.cancel,
            value;
 
        if (!me.editing) {
            return;
        }
 
        value = me.getValue();
 
        // Check isValid first to check any explicitly set errors, then fallback to re-validation
        // this will prevent the possible overwriting of server set errors
        if (!field.isValid() || !field.validate()) {
            if (me.revertInvalid !== false) {
                me.cancelEdit(remainVisible, followItem);
            }
 
            return;
        }
 
        if (me.ignoreNoChange && !field.didValueChange(value, startValue)) {
            me.onEditComplete(remainVisible, false, followItem);
 
            return;
        }
 
        if (me.fireEvent('beforecomplete', me, value, startValue, me.getLocation()) !== false) {
            // Grab the value again, may have changed in beforecomplete
            value = me.getValue();
 
            if (me.updateEl && me.boundEl) {
                me.boundEl.setHtml(value);
            }
 
            me.onEditComplete(remainVisible, cancel, followItem);
            me.fireEvent('complete', me, value, startValue, me.getLocation());
        }
    },
 
    afterShow: function() {
        var me = this;
 
        me.callParent();
 
        me.fireEvent('startedit', me, me.boundEl, me.startValue, me.getLocation());
    },
 
    onFieldClear: function() {
        if (this.cancelOnClear) {
            this.cancelEdit();
        }
    },
 
    /**
     * Cancels the editing process and hides the editor without persisting any changes. The field
     * value will be reverted to the original starting value.
     * @param {Boolean} [remainVisible=false] Override the default behavior and keep the editor
     * visible after cancel
     * @param {Boolean} [followItem] (private) Pass `true` to ensure the item remains visible.
     */
    cancelEdit: function(remainVisible, followItem) {
        var me = this,
            startValue = me.startValue,
            field = me.getField(),
            value;
 
        if (me.editing) {
            if (field) {
                value = me.editedValue = me.getValue();
                // temporarily suspend events on field to prevent the "change" event from firing
                // when setValue() is called
                field.suspendEvents();
                me.setValue(startValue);
                field.resumeEvents();
            }
 
            me.onEditComplete(remainVisible, true, followItem);
            me.fireEvent('canceledit', me, value, startValue);
            delete me.editedValue;
        }
    },
 
    /**
     * @private
     */
    onEditComplete: function(remainVisible /* , cancelling, followItem */) {
        var me = this,
            field = me.getField();
 
        me.editing = false;
 
        if (!remainVisible) {
            me.hide();
            me.toggleBoundEl(true);
        }
 
        field.inputElement.setStyle('font', null);
    },
 
    onFocusLeave: function(e) {
        var me = this;
 
        if (me.allowBlur === true && me.editing) {
            me.completeEdit();
        }
 
        me.callParent([e]);
    },
 
    updateHidden: function(hidden, oldHidden) {
        var me = this,
            field;
 
        if (hidden && !me.destroying) {
            field = me.getField();
 
            if (me.editing) {
                me.completeEdit();
            }
            else if (field.collapse) {
                field.collapse();
            }
        }
 
        me.callParent([hidden, oldHidden]);
    },
 
    /**
     * Gets the data value of the editor
     * @return {Object} The data value
     */
    getValue: function() {
        var field = this.getField();
 
        return field.getValue();
    },
 
    /**
     * Sets the data value of the editor
     * @param {Object} value Any valid value supported by the underlying field
     */
    setValue: function(value) {
        var field = this.getField();
 
        field.setValue(value);
    },
 
    toggleBoundEl: function(visible) {
        if (this.hideEl) {
            this.boundEl.setVisibilityMode(Ext.Element.VISIBILITY);
            this.boundEl.setVisible(visible);
        }
    },
 
    doDestroy: function() {
        var me = this,
            task = me.specialKeyTask;
 
        if (task) {
            task.cancel();
        }
 
        me.callParent();
    }
});