/**
 * A menu object. This is the container to which you may add {@link Ext.menu.Item menu items}.
 *
 * Menus may contain either {@link Ext.menu.Item menu items}, or general
 * {@link Ext.Component Components}. Menus may also contain docked items because it
 * extends {@link Ext.Panel}.
 *
 * By default, Menus are absolutely positioned, floated Components. By configuring a
 * Menu with `{@link #cfg-floated}: false`, a Menu may be used as a child of a
 * {@link Ext.Container Container}.
 *
 * ```javascript
 *  @example({ framework: 'extjs' })
 *     var mainPanel = Ext.create('Ext.Panel', {
 *         fullscreen: true,
 *
 *         items: {
 *             xtype: 'menu',
 *             floated: false,
 *             docked: 'left',
 *             items: [{
 *                 text: 'regular item 1'
 *             },{
 *                 text: 'regular item 2'
 *             },{
 *                 text: 'regular item 3'
 *             }]
 *         }
 *     });
 * ```
 * ```javascript
 * @example({framework: 'ext-react', packages:['ext-react']})
 * import React, { Component } from 'react';
 * import { ExtButton, ExtContainer, ExtMenu, ExtMenuItem } from '@sencha/ext-react';
 *
 * export default class MyExample extends Component {
 *     render() {
 *         return (
 *            <ExtContainer>
 *                <ExtButton text="Menu">
 *                    <ExtMenu rel="menu" >
 *                        <ExtMenuItem text="Mobile" name="ui-type" />
 *                        <ExtMenuItem text="Desktop" name="ui-type"/>
 *                    </ExtMenu>
 *                </ExtButton>
 *            </ExtContainer>
 *         )
 *     }
 * }
 * ```
 * ```javascript
 * @example({framework: 'ext-angular', packages:['ext-angular']})
 * import { Component } from '@angular/core'
 * declare var Ext: any;
 * @Component({
 *     selector: 'app-root',
 *     styles: [``],
 *     template: `
 *         <ExtContainer>
 *             <ExtButton text="Menu">
 *                 <ExtMenu rel="menu" >
 *                     <ExtMenuItem text="Mobile" name="ui-type" ></ExtMenuItem>
 *                     <ExtMenuItem text="Desktop" name="ui-type"></ExtMenuItem>
 *                 </ExtMenu>
 *             </ExtButton>
 *         </ExtContainer>
 *     `
 * })
 * export class AppComponent {} 
 * ```
 * ```html
 * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 })
 * @example({tab: 1})
 * <ext-container>
 *    <ext-button text="Menu">
 *        <ext-menu rel="menu" >
 *            <ext-menuitem text="Mobile" name="ui-type"></ext-menuitem>
 *            <ext-menuitem text="Desktop" name="ui-type"></ext-menuitem>
 *        </ext-menu>
 *    </ext-button>
 * </ext-container>
 * ```
 * ```javascript
 * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 })
 * import '@sencha/ext-web-components/dist/ext-container.component';
 * import '@sencha/ext-web-components/dist/ext-button.component';
 * import '@sencha/ext-web-components/dist/ext-menu.component';
 * import '@sencha/ext-web-components/dist/ext-menuitem.component';
 *
 * export default class MenuComponent {} 
 * @since 6.5.0
 */
Ext.define('Ext.menu.Menu', {
    extend: 'Ext.Panel',
    xtype: 'menu',
 
    requires: [
        'Ext.menu.Item',
        'Ext.menu.Manager',
        'Ext.layout.VBox'
    ],
 
    /**
     * @property {Boolean} isMenu
     * `true` in this class to identify an object as an instantiated Menu, or subclass thereof.
     */
    isMenu: true,
 
    config: {
        /**
         * @cfg {String} align
         */
        align: 'tl-bl?', // TODO: Override in RTL
 
        /**
         * @cfg {Boolean} indented
         * By default menu items reserve space at their start for an icon.  Set indented
         * to `false` to remove this space.  This behavior can be overridden at the level
         * of an individual menu item using the item's {@link Ext.menu.Item#indented} config.
         * Items that are not {@link Ext.menu.Item Menu Items} can provide an `indented`
         * property in their initial config object to control their indentation behavior.
         *
         * When set to `false` no vertical `separator` will be shown.
         */
        indented: true,
 
        /**
         * @cfg {Boolean} [separator=false]
         * True to show a vertical icon separator line between the icons and the menu text.
         */
        separator: null,
 
        /**
         * @cfg {Boolean} [autoHide=true]
         * `false` to prevent the menu from auto-hiding when focus moves elsewhere
         */
        autoHide: null,
 
        /**
         * @cfg {Object} groups
         * This object is a dictionary of {@link Ext.menu.RadioItem#cfg!group radio group}
         * keys and {@link Ext.menu.RadioItem#cfg!value values}. This map is maintained by
         * the individual radio items in this menu but can also be useful for data binding.
         *
         * For example:
         *
         *      @example
         *      Ext.Viewport.add({
         *          xtype: 'container',
         *          items: [{
         *              xtype: 'button',
         *              bind: 'Call {menuGroups.option}',
         *
         *              viewModel: {
         *                  data: {
         *                      menuGroups: {
         *                          option: 'home'
         *                      }
         *                  }
         *              },
         *
         *              menu: {
         *                  bind: {
         *                      groups: '{menuGroups}'
         *                  },
         *                  items: [{
         *                      text: 'Home',
         *                      group: 'option',
         *                      value: 'home'
         *                  }, {
         *                      text: 'Work',
         *                      group: 'option',
         *                      value: 'work'
         *                  }, {
         *                      text: 'Mobile',
         *                      group: 'option',
         *                      value: 'mobile'
         *                  }]
         *              }
         *          }]
         *      });
         *
         * The presence of the `group` property in the configuration of the above
         * {@link Ext.menu.Menu menu} causes the menu to create a
         * {@link Ext.menu.RadioItem RadioItem} instances.
         */
        groups: null
    },
 
    /**
     * @cfg {Boolean} allowOtherMenus
     * True to allow multiple menus to be displayed at the same time.
     */
    allowOtherMenus: false,
 
    /**
     * @cfg {Boolean} ignoreParentClicks
     * True to ignore clicks on any item in this menu that is a parent item (displays a submenu)
     * so that the submenu is not dismissed when clicking the parent item.
     */
    ignoreParentClicks: false,
 
    /**
     * @cfg {Number} mouseLeaveDelay
     * The delay in ms as to how long the framework should wait before firing a mouseleave event.
     * This allows submenus not to be collapsed while hovering other menu items.
     */
    mouseLeaveDelay: 50,
 
    defaultType: 'menuitem',
 
    autoSize: null,
 
    twoWayBindable: 'groups',
 
    keyMap: {
        scope: 'this',
 
        // Space key clicks
        SPACE: 'onSpaceKey',
 
        // ESC hides
        ESC: 'onEscKey'
    },
 
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
 
    classCls: Ext.baseCSSPrefix + 'menu',
    indentedCls: Ext.baseCSSPrefix + 'indented',
    hasSeparatorCls: Ext.baseCSSPrefix + 'has-separator',
    nonMenuItemCls: Ext.baseCSSPrefix + 'non-menuitem',
 
    // We need to focus disabled menu items when navigating as per WAI-ARIA:
    // http://www.w3.org/TR/wai-aria-practices/#menu
    allowFocusingDisabledChildren: true,
 
    border: true,
 
    // When a Menu is used as a carrier to float some focusable Component such as a
    // DatePicker or ColorPicker. This will be used to delegate focus to its focusable
    // child. In normal usage, a Menu is a FocusableContainer, and this will not be
    // consulted.
    defaultFocus: ':focusable',
 
    floated: true,
 
    // May be asked to focus, will delegate down to its first focusable child
    focusable: true,
 
    focusableContainer: true,
 
    nameHolder: true,
    weighted: true,
 
    /**
     * @event groupchange
     * Fires when a child {@link Ext.menu.RadioItem radio item} in a menu
     * {@link Ext.menu.RadioItem#cfg!group group} changes {@link Ext.menu.RadioItem#cfg!checked}
     * state, and the group's value therefore changes.
     *
     * The value changes to the {@link Ext.menu.RadioItem#cfg!value} of the sole checked
     * member of the group, or `null` if all members have become
     * {@link Ext.menu.RadioItem#cfg!allowUncheck unchecked}.
     *
     * @param {Ext.menu.Menu} menu The menu firing this event.
     * @param {String} groupName The name of the group of items.
     * @param {Object} newValue The new value of the group.
     * @param {Object} oldValue The old value of the group.
     * @since 6.5.1
     */
 
    initialize: function() {
        var me = this,
            listeners = {
                click: me.onClick,
                mouseover: me.onMouseOver,
                scope: me
            };
 
        me.callParent();
 
        if (Ext.supports.Touch) {
            listeners.pointerdown = me.onMouseOver;
        }
 
        me.element.on(listeners);
 
        // Child item mouseovers are handled on a delay so that
        // rapid movement down a menu does not activate/deactivate during mouse motion.
        // Also, allow for rapid reentry when user moves mouse quickly.
        me.itemOverTask = new Ext.util.DelayedTask(me.handleItemOver, me);
 
        me.mouseMonitor = me.el.monitorMouseLeave(me.mouseLeaveDelay, me.onMouseLeave, me);
    },
 
    doDestroy: function() {
        var me = this;
 
        // Cancel any impending mouseover consequences
        me.itemOverTask.cancel();
 
        // Menu can be destroyed while shown;
        // we should notify the Manager
        Ext.menu.Manager.onHide(me);
 
        me.parentMenu = me.ownerCmp = null;
 
        if (me.rendered) {
            me.el.un(me.mouseMonitor);
        }
 
        me.callParent();
    },
 
    showBy: function(component, alignment, options) {
        this.callParent([component, alignment || this.getAlign(), options]);
    },
 
    onFocusEnter: function(e) {
        var me = this,
            hierarchyState;
 
        me.callParent([e]);
 
        me.mixins.focusablecontainer.onFocusEnter.call(me, e);
 
        if (me.getFloated()) {
            hierarchyState = me.getInherited();
 
            // The topmost focusEnter event upon entry into a floating menu stack
            // is recorded in the hierarchy state.
            //
            // Focusing upwards from descendant menus in a stack will NOT trigger onFocusEnter
            // on the parent menu because focus is already in its component tree.
            // For focusing downwards we check for presence of the topmostFocusEvent
            // already being present in the hierarchy.
            //
            // If we need to explicitly access a focus reversion point, we can use that.
            // This is only ever needed if tabbing forwards from the menu. We explicitly
            // push focus to the topmost focusEnter component, and then allow natural
            // tabbing to proceed from there.
            //
            // In all other focus reversion scenarios we use the immediate focusEnter event
            if (!hierarchyState.topmostFocusEvent) {
                hierarchyState.topmostFocusEvent = e;
            }
        }
    },
 
    onFocusLeave: function(e) {
        this.callParent([e]);
 
        if (this.getAutoHide() !== false) {
            this.hide();
        }
    },
 
    onItemAdd: function(item, index) {
        this.callParent([item, index]);
 
        this.syncItemIndentedCls(item);
 
        if (!item.isMenuItem && !item.isMenuSeparator) {
            item.addCls(this.nonMenuItemCls);
        }
    },
 
    onItemRemove: function(item, index, destroying) {
        this.callParent([item, index, destroying]);
 
        item.removeCls(this.indentedCls, this.nonMenuItemCls);
    },
 
    beforeShow: function() {
        var me = this,
            parent;
 
        // If this is the topmost in a stack of menus, hide "other" menus
        // if we are configured not to tolerate other menus being visible.
        if (me.getFloated()) {
            parent = me.hasFloatMenuParent();
 
            if (!parent && !me.allowOtherMenus) {
                Ext.menu.Manager.hideAll();
            }
        }
 
        me.callParent(arguments);
    },
 
    afterShow: function() {
        var me = this,
            ariaDom = me.ariaEl.dom;
 
        me.callParent();
        Ext.menu.Manager.onShow(me);
 
        if (me.getFloated() && ariaDom) {
            ariaDom.setAttribute('aria-expanded', true);
        }
 
        // Restore configured maxHeight
        if (me.getFloated()) {
            me.maxHeight = me.savedMaxHeight;
        }
 
        if (me.autoFocus) {
            me.focus();
        }
    },
 
    afterHide: function() {
        var me = this,
            ariaDom = me.ariaEl.dom;
 
        me.callParent();
        me.lastHide = Ext.Date.now();
        Ext.menu.Manager.onHide(me);
 
        if (me.getFloated() && ariaDom) {
            ariaDom.setAttribute('aria-expanded', false);
        }
 
        // Top level focusEnter is only valid when focused
        delete me.getInherited().topmostFocusEvent;
    },
 
    factoryItem: function(cfg) {
        var result;
 
        if (typeof cfg === 'string' && cfg[0] !== '@') {
            if (cfg === '-') {
                cfg = { xtype: 'menuseparator' };
            }
            else {
                cfg = {};
            }
        }
 
        result = this.callParent([cfg]);
 
        if (result.isMenuItem) {
            result.parentMenu = this;
        }
 
        return result;
    },
 
    updateIndented: function(indented) {
        var me = this;
 
        if (!me.isConfiguring) {
            me.bodyElement.toggleCls(me.hasSeparatorCls, !!(indented && me.getSeparator()));
            me.items.each(me.syncItemIndentedCls, me);
        }
    },
 
    updateSeparator: function(separator) {
        this.bodyElement.toggleCls(this.hasSeparatorCls, !!(separator && this.getIndented()));
    },
 
    privates: {
        applyItemDefaults: function(item) {
            item = this.callParent([item]);
 
            if (!item.isComponent && !item.xtype && !item.xclass) {
                // If configured with group or name, then it's a RadioItem
                if (item.group || item.name) {
                    item.xtype = 'menuradioitem';
                }
                // The presence of a checked config defaults the type to a CheckItem
                else if ('checked' in item) {
                    item.xtype = 'menucheckitem';
                }
            }
 
            return item;
        },
 
        applyGroups: function(groups, oldGroups) {
            var me = this,
                currentGroups = Ext.apply({}, oldGroups),
                isConfiguring = me.isConfiguring,
                groupName, members, len, i, item, value, oldValue;
 
            if (groups) {
                me.updatingGroups = true;
 
                for (groupName in groups) {
                    oldValue = currentGroups[groupName];
                    currentGroups[groupName] = value = groups[groupName];
 
                    if (!isConfiguring) {
                        members = me.lookupName(groupName);
 
                        for (= 0, len = members.length; i < len; i++) {
                            item = members[i];
 
                            // Set checked state depending on whether the value is the group's value
                            item.setChecked(item.getValue() === value);
                        }
 
                        me.fireEvent('groupchange', me, groupName, value, oldValue);
                    }
                }
 
                me.updatingGroups = false;
            }
 
            return currentGroups;
        },
 
        processFocusableContainerKeyEvent: function(e) {
            var keyCode = e.keyCode,
                item;
 
            // FocusableContainer ignores events from input fields.
            // In Menus we have a special case. The ESC key, or arrow from
            // <input type="checkbox"> must be handled.
            if (
                keyCode === e.ESC ||
                (
                    Ext.fly(e.target).is('input[type=checkbox]') && (
                        keyCode === e.LEFT ||
                        keyCode === e.RIGHT ||
                        keyCode === e.UP ||
                        keyCode === e.DOWN
                    )
                )
            ) {
                e.preventDefault();
                // TODO: we should never modify the "target" property of an event
                item = this.getItemFromEvent(e);
                e.target = item && item.focusEl.dom;
            }
            // TAB from textual input fields is converted into UP or DOWN.
            else if (keyCode === e.TAB && Ext.fly(e.target).is('input[type=text],textarea')) {
                e.preventDefault();
                // TODO: we should never modify the "target" property of an event
                item = this.getItemFromEvent(e);
                e.target = item && item.focusEl.dom;
 
                if (e.shiftKey) {
                    e.shiftKey = false;
                    e.keyCode = e.UP;
                }
                else {
                    e.keyCode = e.DOWN;
                }
            }
            else {
                return this.callParent([e]);
            }
 
            return e;
        },
 
        onEscKey: function(e) {
            if (this.getFloated()) {
                this.hide();
            }
        },
 
        onSpaceKey: function(e) {
            var clickedItem = this.getItemFromEvent(e);
 
            if (clickedItem && clickedItem.isMenuItem) {
                clickedItem.onSpace(e);
            }
        },
 
        onFocusableContainerLeftKey: function(e) {
            // The default action is to scroll the nearest horizontally scrollable container
            e.preventDefault();
 
            // Focus reversion will focus the activating MenuItem
            if (this.parentMenu) {
                this.hide();
            }
        },
 
        onFocusableContainerRightKey: function(e) {
            var clickedItem = this.getItemFromEvent(e);
 
            // The default action is to scroll the nearest horizontally scrollable container
            e.preventDefault();
 
            if (clickedItem) {
                clickedItem.expandMenu(e);
            }
        },
 
        onClick: function(e) {
            var me = this,
                type = e.type,
                clickedItem,
                clickResult,
                isKeyEvent = type === 'keydown',
                isTouchEvent = e.pointerType === 'touch';
 
            if (me.getDisabled()) {
                return e.stopEvent();
            }
 
            clickedItem = me.getItemFromEvent(e);
 
            if (clickedItem && clickedItem.isMenuItem) {
                if (!clickedItem.getMenu() || !me.ignoreParentClicks) {
                    clickResult = clickedItem.onClick(e);
                }
                else {
                    e.stopEvent();
                }
 
                // Click handler on the item could have destroyed the menu
                if (me.destroyed) {
                    return;
                }
 
                // SPACE and ENTER invokes the menu
                if (
                    clickedItem.getMenu() &&
                    clickResult !== false &&
                    (isKeyEvent || isTouchEvent)
                ) {
                    clickedItem.expandMenu(e);
                }
            }
 
            // Click event may be fired without an item, so we need a second check
            if (!clickedItem || clickedItem.getDisabled()) {
                clickedItem = undefined;
            }
 
            me.fireEvent('click', me, clickedItem, e);
        },
 
        onMouseLeave: function(e) {
            var me = this;
 
            if (me.itemOverTask) {
                me.itemOverTask.cancel();
            }
 
            if (me.getDisabled()) {
                return;
            }
 
            me.fireEvent('mouseleave', me, e);
        },
 
        /**
         * Handle either pointer moving over the menu's element, or, on
         * touch capable devices, a touch start on the menu's element.
         */
        onMouseOver: function(e) {
            var me = this,
                activeItem = me.getActiveItem(),
                activeItemMenu = activeItem && activeItem.getMenu && activeItem.getMenu(),
                activeItemExpanded = activeItemMenu && activeItemMenu.isVisible(),
                isTouch = e.pointerType === 'touch',
                mouseEnter, overItem, el;
 
            if (!me.getDisabled()) {
 
                // If triggered by a touchstart, mouseenter is declared
                // if focus does not already reside within the menu.
                if (isTouch) {
                    mouseEnter = !me.el.contains(document.activeElement);
                }
                else {
                    mouseEnter = !me.el.contains(e.getRelatedTarget());
                }
 
                overItem = me.getItemFromEvent(e);
 
                // Focus the item in time specified by mouseLeaveDelay.
                // If we mouseout, or move to another item this invocation will be canceled.
                if (overItem) {
                    // pointerdown is routed to mouseover, handle pointerdown without delay
                    if (isTouch) {
                        me.handleItemOver(e, overItem);
                    }
                    else {
                        // ignore events on elements outside the bodyElement of menu items
                        // this ensures we don't apply mouseover styling when hovering the
                        // "separator" of a menu item, and we don't fire the menu item's
                        // handler when the separator is clicked.
                        el = overItem.isMenuItem ? overItem.bodyElement : overItem.el;
 
                        if (!el.contains(e.getRelatedTarget())) {
                            me.itemOverTask.delay(
                                activeItemExpanded ? me.mouseLeaveDelay : 0,
                                null,
                                null,
                                [e, overItem]
                            );
                        }
                    }
                }
 
                if (mouseEnter) {
                    me.fireEvent('mouseenter', me, e);
                }
 
                me.fireEvent('mouseover', me, overItem, e);
            }
        },
 
        /**
         * Handle the delayed consequences of pointer over a child menu.
         * Also called on touch start.
         */
        handleItemOver: function(e, item) {
            var isMouseover = e.pointerType === 'mouse';
 
            // We'll get here on touchstart on touch devices.
            // Only focus non-MenuItems on real mouseover events.
            if (!item.containsFocus && (isMouseover || item.isMenuItem)) {
                item.focus();
            }
 
            // Only expand the menu on real mouseover events.
            if (item.expandMenu && isMouseover) {
                item.expandMenu(e);
            }
        },
 
        /**
         * Gets the immediate child component which the passed event took place within
         */
        getItemFromEvent: function(e) {
            var bodyDom = this.bodyElement.dom,
                toEl = e.getTarget(),
                component;
 
            // See which immediate child element the event is in and find the
            // component which that element encapsulates.
            while (toEl && toEl.parentNode !== bodyDom) {
                toEl = toEl.parentNode;
            }
 
            component = toEl && Ext.getCmp(toEl.id);
 
            if (component && component.isMenuItem && !e.within(component.bodyElement)) {
                // ignore events on elements outside the bodyElement of menu items
                // this ensures we don't apply mouseover styling when hovering the
                // "separator" of a menu item, and we don't fire the menu item's
                // handler when the separator is clicked.
                component = null;
            }
 
            return component;
        },
 
        hasFloatMenuParent: function() {
            return this.parentMenu || this.up('menu[_floated=true]');
        },
 
        syncItemIndentedCls: function(item) {
            // menu items have an "indented" config
            // non menu items can have an "indented" property
            // The item's "indented" takes precedence over the menu's "indented"
            var indented = item.isMenuItem ? item.getIndented() : item.indented;
 
            item.toggleCls(this.indentedCls,
                           !!(indented || (this.getIndented() && (indented !== false))));
        }
    },
 
    statics: {
        /**
         * Returns a {@link Ext.menu.Menu} object
         * @param {Object/Object[]} menu An array of menu item configs,
         * or a Menu config that will be used to generate and return a new Menu.
         * @param {Object} [config] A configuration to use when creating the menu.
         * @return {Ext.menu.Menu} 
         */
        create: function(menu, config) {
            if (Ext.isArray(menu)) { // array of menu items
                menu = Ext.apply({ xtype: 'menu', items: menu }, config);
            }
            else {
                menu = Ext.apply({ xtype: 'menu' }, menu, config);
            }
 
            return Ext.create(menu);
        }
    },
 
    deprecated: {
        '6.5': {
            configs: {
                plain: {
                    message: 'To achieve classic toolkit "plain" effect, use "indented".'
                },
                showSeparator: {
                    message: 'To achieve classic toolkit "showSeparator" effect, use "separator".'
                }
            }
        }
    }
 
});