/**
 * A menu item that contains a togglable checkbox by default, but that can also be
 * a part of a radio group.
 *
 * ```javascript
 *  @example({ framework: 'extjs' })
 *      Ext.create({
 *          xtype: 'menu',
 *          renderTo: Ext.getBody(),
 *          width: 100,
 *          items: [{
 *              xtype: 'menucheckitem',
 *              text: 'select all'
 *          },{
 *              xtype: 'menucheckitem',
 *              text: 'select specific'
 *          },{
 *              iconCls: 'add16',
 *              text: 'icon item'
 *          },{
 *              text: 'regular item'
 *          }]
 *      });
 * ```
 * ```javascript
 * @example({framework: 'ext-react', packages:['ext-react']})
 * import React, { Component } from 'react';
 * import { ExtButton, ExtContainer, ExtMenu, ExtMenuCheckItem } from '@sencha/ext-react';
 *
 * export default class MyExample extends Component {
 *     render() {
 *         return (
 *            <ExtContainer>
 *                <ExtButton text="Menu">
 *                    <ExtMenu rel="menu" >
 *                        <ExtMenuCheckItem text="Mobile" name="ui-type" />
 *                        <ExtMenuCheckItem 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" >
 *                    <ExtMenuCheckItem text="Mobile" name="ui-type" >
 *                    </ExtMenuCheckItem>
 *                    <ExtMenuCheckItem text="Desktop" name="ui-type">
 *                    </ExtMenuCheckItem>
 *                </ExtMenu>
 *            </ExtButton>
 *        </ExtContainer>
 * `
 * })
 * export class AppComponent {} 
 * ```
 * ```html
 * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 })
 * <ext-container>
 *    <ext-button text="Menu">
 *        <ext-menu rel="menu" >
 *            <ext-menucheckitem text="Mobile" name="ui-type"></ext-menucheckitem>
 *            <ext-menucheckitem text="Desktop" name="ui-type"></ext-menucheckitem>
 *        </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-menucheckitem.component';
 *
 * export default class CheckItemComponent {} 
 * ```
 *
 * @since 6.5.0
 */
Ext.define('Ext.menu.CheckItem', {
    extend: 'Ext.menu.Item',
    xtype: 'menucheckitem',
 
    /**
     * @property {Boolean} isMenuCheckItem
     * `true` in this class to identify an object as an instantiated Menu CheckItem,
     * or subclass thereof.
     */
    isMenuCheckItem: true,
 
    /**
     * @cfg {Boolean} hideOnClick
     * Whether to not to hide the owning menu when this item is clicked.
     * Defaults to `false` for checkbox items, and radio group items.
     */
    hideOnClick: false,
 
    config: {
        /**
         * @cfg {Boolean} checked
         * True to render the menuitem initially checked.
         */
        checked: false,
 
        /**
         * @cfg {Function/String} checkHandler
         * @param {Ext.menu.CheckItem} This menu CheckItem
         * @param {Boolean} checked The new checked state
         * Alternative for the {@link #checkchange} event.  Gets called with the same parameters.
         * @controllable
         */
        checkHandler: null,
 
        /**
         * @cfg {Object} scope
         * Scope for the {@link #checkHandler} callback.
         */
 
        /**
         * @cfg {Boolean} checkChangeDisabled
         * True to prevent the checked item from being toggled. Any submenu will still be
         * accessible.
         */
        checkChangeDisabled: false,
 
        /**
         * @cfg {String} value
         * The value of this item when {@link #cfg!checked} is `true`.
         * If this is not specified, the value defaults to the {@link #cfg!text} value.
         */
        value: null,
 
        showCheckbox: null
    },
 
    /**
     * @cfg [publishes='checked']
     * @inheritdoc Ext.mixin.Bindable#cfg-publishes
     */
 
    classCls: Ext.baseCSSPrefix + 'menucheckitem',
 
    checkedCls: Ext.baseCSSPrefix + 'checked',
 
    checkboxIconElCls: Ext.baseCSSPrefix + 'checkbox-icon-el',
 
    ariaRole: 'menuitemcheckbox',
 
    defaultBindProperty: 'checked',
 
    /**
     * @cfg {String} submenuText
     * Text to be announced by screen readers when a check item submenu is focused.
     * @locale
     */
    submenuText: '{0} submenu',
 
    /**
     * @hide
     * Not supported on CheckItems and RadioItems
     */
    href: null,
 
    /**
     * @hide
     * Not supported on CheckItems and RadioItems
     */
    target: null,
 
    /**
     * @event beforecheckchange
     * Fires before a a user invoked check change. This does *not* fire when a programmatic
     * check change is performed.
     * @param {Ext.menu.CheckItem} this CheckItem
     * @param {Boolean} checked 
     */
 
    /**
     * @event checkchange
     * Fires after a change event.
     * @param {Ext.menu.CheckItem} this CheckItem
     * @param {Boolean} checked 
     */
 
    element: {
        reference: 'element',
        tabindex: Ext.is.iOS ? -1 : null,
        cls: Ext.baseCSSPrefix + 'unselectable ' +
            // The checkbox always occupies the "left" icon space
            Ext.baseCSSPrefix + 'has-left-icon'
    },
 
    focusEl: 'checkboxElement',
    ariaEl: 'checkboxElement',
 
    getTemplate: function() {
        var template = this.callParent(),
            body = template[0];
 
        body.tag = 'div';
        body.href = null;
 
        body.children.push({
            // An absolutely positioned transparent checkbox that acts as the focus/aria element
            tag: 'input',
            type: 'checkbox',
            reference: 'checkboxElement',
            cls: Ext.baseCSSPrefix + 'checkbox-el'
        });
 
        return template;
    },
 
    initialize: function() {
        var me = this;
 
        me.callParent();
 
        me.element.on({
            mousedown: 'onCheckboxMousedown',
            translate: false,
            scope: me
        });
 
        me.checkboxElement.on({
            change: 'onCheckboxChange',
            delegated: false,
            scope: me
        });
 
        this.syncCheckboxCls();
    },
 
    enableFocusable: function() {
        this.mixins.focusable.enableFocusable();
 
        // Menuitems only go readonly when disabled.
        this.checkboxElement.dom.readOnly = '';
    },
 
    disableFocusable: function() {
        this.mixins.focusable.disableFocusable();
 
        // Menu items must be focusable, but not active when disabled.
        this.checkboxElement.dom.readOnly = 'readonly';
    },
 
    /**
     * Sets the checked state of the item
     * @param {Boolean} checked True to check, false to un-check
     * @param {Boolean} [suppressEvents=false] True to prevent firing the checkchange events.
     */
    setChecked: function(checked, suppressEvents) {
        var me = this,
            isConfiguring = me.isConfiguring;
 
        // Events and handlers are suppressed during configuration
        if (suppressEvents) {
            me.isConfiguring = true;
        }
 
        me.callParent([checked]);
 
        if (suppressEvents) {
            me.isConfiguring = isConfiguring;
        }
    },
 
    updateChecked: function(checked) {
        this.checkboxElement.dom.checked = checked;
 
        // We do not get an event on programmatic check change
        // so call it proramatically.
        this.onCheckChange();
    },
 
    updateCheckChangeDisabled: function(checkChangeDisabled) {
        this.checkboxElement.dom.readOnly = checkChangeDisabled;
    },
 
    updateValue: function(value) {
        this.checkboxElement.dom.value = value;
    },
 
    updateText: function(text) {
        var me = this,
            ariaDom = me.ariaEl.dom;
 
        me.callParent([text]);
 
        // Use text as an analog for value if user has not specified a value
        if (me.getValue() === null) {
            me.setValue(text);
        }
 
        if (ariaDom && me.getMenu()) {
            ariaDom.setAttribute('aria-label', Ext.String.formatEncode(me.submenuText, text));
        }
    },
 
    applyShowCheckbox: function(showCheckbox) {
        return !!showCheckbox;
    },
 
    updateShowCheckbox: function(showCheckbox) {
        this.checkboxElement.setDisplayed(showCheckbox);
    },
 
    updateIcon: function(icon, oldIcon) {
        this.callParent([icon, oldIcon]);
 
        if (!this.isConfiguring) {
            this.syncCheckboxCls();
        }
    },
 
    updateIconCls: function(iconCls, oldIconCls) {
        this.callParent([iconCls, oldIconCls]);
 
        if (!this.isConfiguring) {
            this.syncCheckboxCls();
        }
    },
 
    updateIconAlign: function(iconAlign, oldIconAlign) {
        this.callParent([iconAlign, oldIconAlign]);
 
        if (!this.isConfiguring) {
            this.syncCheckboxCls();
        }
    },
 
    privates: {
        onSpace: function(e) {
            // Disabled menuitems are still focusable, but must not react
            if (this.getDisabled()) {
                e.preventDefault();
            }
        },
 
        onClick: function(e) {
            var me = this,
                arrowElement = me.arrowElement,
                result, parentResult, region;
 
            // Disabled menuitems are still focusable, but must not react
            if (me.getDisabled()) {
                e.preventDefault();
            }
 
            // Clicking on the checkboxElement is processed natively, and we react to the
            // change event.
            if (e.pointerType !== 'mouse') {
                region = me.bodyElement.getRegion();
 
                if (me.getMenu()) {
                    region.setWidth(
                        region.getWidth() - arrowElement.getWidth() - arrowElement.getMargin('lr')
                    );
                }
 
                // When interacting with a menucheckitem via a touch screen the submenu
                // is shown by tapping directly on the arrow.  Tapping anywhere else on
                // the item will simply toggle the checked state.
                if (region.contains(e.getPoint())) {
                    // clicked on the icon or text - veto menu show
                    result = false;
                }
                else {
                    // clicked on the arrow - allow the menu to be shown, but preventDefault
                    // to stop the checkbox from being toggled
                    e.preventDefault();
                }
            }
 
            parentResult = me.callParent([e]);
 
            // Allow either to veto menu showing
            return (result === false) ? result : parentResult;
        },
 
        onCheckboxMousedown: function(e) {
            // Prevent focus movement away from the checkboxElement on mousedown outside of
            // the checkboxElement. The mouseover will have focused it.
            // Also, checkboxes are not focusable by default on Apple Operating Systems.
            // See http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/
            // So to prevent focus flying to body on mousedown, we prevent default.
            if ((Ext.isApple && !Ext.isChrome) || !this.checkboxElement.contains(e.target)) {
                e.preventDefault();
            }
        },
 
        onCheckboxChange: function() {
            var me = this,
                checkboxElement = me.checkboxElement.dom,
                meChecked = me.getChecked(),
                isChecked = checkboxElement.checked;
 
            if (me.getCheckChangeDisabled()) {
                checkboxElement.checked = meChecked;
 
                return false;
            }
 
            if (isChecked === meChecked || me.getDisabled()) {
                return;
            }
 
            // Allow an event to veto by flipping the DOM state back.
            // This will cause another DOM change event, but that will be
            // rejected above.
            if (me.fireEvent('beforecheckchange', me, isChecked) === false) {
                checkboxElement.checked = !isChecked;
            }
            else {
                // Sync widget state in response to the checkbox changing state.
                me.setChecked(isChecked);
            }
        },
 
        onCheckChange: function() {
            var me = this,
                checked = me.checkboxElement.dom.checked,
                el = me.el,
                ariaDom = me.ariaEl.dom;
 
            el.toggleCls(me.checkedCls, !!checked);
 
            if (ariaDom) {
                ariaDom.setAttribute('aria-checked', me.getMenu() ? 'mixed' : checked);
            }
 
            me.publishState('checked', checked);
 
            // Do not fire events if set in configuration
            if (!me.isConfiguring) {
                Ext.callback(me.getCheckHandler(), me.scope, [me, checked], 0, me);
                me.fireEvent('checkchange', me, checked);
            }
        },
 
        syncHasIconCls: function() {
            var me = this;
 
            me.toggleCls(me.hasRightIconCls, me.hasIcon());
        },
 
        syncCheckboxCls: function() {
            var me = this,
                leftIconElement = me.leftIconElement,
                rightIconElement = me.rightIconElement,
                checkboxIconElCls = me.checkboxIconElCls,
                checkboxIconElement, oldCheckboxIconElement;
 
            if (me.hasIcon() && (me.getIconAlign() === 'left')) {
                checkboxIconElement = rightIconElement;
                oldCheckboxIconElement = leftIconElement;
            }
            else {
                checkboxIconElement = leftIconElement;
                oldCheckboxIconElement = rightIconElement;
            }
 
            checkboxIconElement.addCls(checkboxIconElCls);
            oldCheckboxIconElement.removeCls(checkboxIconElCls);
        }
    }
});