/**
 * This plugin calls a callback whenever the mouse enters or leaves descendant
 * elements of its host component identified by a {@link Ext.plugin.MouseEnter#delegate delegate}
 * query selector string.
 *
 * This is useful for components which render arbitrary and transient child elements
 * such as DataViews and Charts. It allows notification of mousenter events from 
 * child nodes without having to add  listeners to each child element.
 */
Ext.define('Ext.plugin.MouseEnter', {
    extend: 'Ext.plugin.Abstract',
    alias: 'plugin.mouseenter',

    /**
     * @cfg {Ext.dom.Element/String} [element="el"] The element, or component element reference
     * name to which to add the mouse listener.
     */
    element: 'el',

    /**
     * @cfg {String} delegate A query selector string to identify descendant elements
     * which trigger a call to the handler.
     */

    /**
     * @cfg {String/Function} handler A callback to invoke when a the mouse enters a
     * descendant delegate.
     * @cfg {Ext.event.Event} handler.e The `mouseover` event which triggered the mouse enter.
     * @cfg {HTMLElement} handler.target The delegate element into which the mouse just entered.
     */

    /**
     * @cfg {String/Function} [leaveHandler] A callback to invoke when a the mouse leaves a
     * descendant delegate.
     * @cfg {Ext.event.Event} leaveHandler.e The `mouseover` event which triggered the mouse leave.
     * @cfg {HTMLElement} leaveHandler.target The delegate element which the mouse just left.
     */

    /**
     * @cfg {Object} [scope] The scope (`this` pointer) in which to execute the callback(s).
     */

    /**
     * @cfg {Number} [delay] The time in milliseconds to wait before processing the mouse event.
     * This can prevent unwanted processing when the user swipes the mouse rapidly across
     * the component.
     */

    init: function(component) {
        //<debug>
        if (!this.delegate) {
            Ext.raise('mouseenter plugin must be configured with a delegate selector');
        }

        if (!this.handler) {
            Ext.raise('mouseenter plugin must be configured with handler callback');
        }
        //</debug>

        // eslint-disable-next-line vars-on-top
        var me = this,
            listeners = {
                mouseover: 'onMouseEvent',
                scope: me,
                destroyable: true
            },
            element = me.element;

        // Need the mouseout listener if there's a delay, so that we get an event 
        // in which to cancel the mouseover handling.
        if (me.leaveHandler || me.delay) {
            listeners.mouseout = 'onMouseEvent';
        }

        // Element being a string means a referenced element name in the Component
        if (typeof element === 'string') {
            element = component[me.element];
        }

        // If the component has the element, add the listener.
        // Modern components always will have their elements.
        if (element) {
            me.mouseListener = Ext.get(element).on(listeners);
        }
        // For classic, we have to wait until render.
        // destroyable: true does not work on named element listeners on a component
        // https://sencha.jira.com/browse/EXTJS-22866
        else {
            component.on({
                render: function() {
                    me.mouseListener = component[me.element].on(listeners);
                },
                single: true
            });
        }
    },

    onMouseEvent: function(e) {
        var me = this,
            delegate = e.getTarget(me.delegate);

        // If we have changed delegates, fire (or schedule, if we are delaying) the handler
        if (delegate && delegate !== e.getRelatedTarget(me.delegate)) {
            if (me.delay) {
                Ext.undefer(me.mouseEventTimer);
                me.mouseEventTimer = Ext.defer(me.handleMouseEvent, me.delay, me, [e, delegate]);
            }
            else {
                me.handleMouseEvent(e, delegate);
            }
        }
    },

    handleMouseEvent: function(e, delegate) {
        var me = this;

        if (e.type === 'mouseover') {
            Ext.callback(me.handler, null, [e, delegate], 0, me.cmp, me.scope);
        }
        else if (me.leaveHandler) {
            Ext.callback(me.leaveHandler, null, [e, delegate], 0, me.cmp, me.scope);
        }
    },

    destroy: function() {
        Ext.destroy(this.mouseListener);
        this.callParent();
    }
});