import { __esDecorate, __runInitializers } from "tslib";
import { html } from 'lit';
import { property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import UiListItem from '../../list/internals/ListItem.js';
import { findElementInShadowRoots } from '../../../lib/Dom.js';
import { nanoid } from 'nanoid';
import '../../icons/ui-icon.js';
let UiMenuItem = (() => {
    let _classSuper = UiListItem;
    let _submenu_decorators;
    let _submenu_initializers = [];
    let _submenu_extraInitializers = [];
    let _selected_decorators;
    let _selected_initializers = [];
    let _selected_extraInitializers = [];
    let _value_decorators;
    let _value_initializers = [];
    let _value_extraInitializers = [];
    let _showSelectionIcon_decorators;
    let _showSelectionIcon_initializers = [];
    let _showSelectionIcon_extraInitializers = [];
    let _subMenuOpen_decorators;
    let _subMenuOpen_initializers = [];
    let _subMenuOpen_extraInitializers = [];
    return class UiMenuItem extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _submenu_decorators = [property({ type: String })];
            _selected_decorators = [property({ type: Boolean, reflect: true })];
            _value_decorators = [property({ type: String, reflect: true })];
            _showSelectionIcon_decorators = [property({ type: Boolean })];
            _subMenuOpen_decorators = [state()];
            __esDecorate(this, null, _submenu_decorators, { kind: "accessor", name: "submenu", static: false, private: false, access: { has: obj => "submenu" in obj, get: obj => obj.submenu, set: (obj, value) => { obj.submenu = value; } }, metadata: _metadata }, _submenu_initializers, _submenu_extraInitializers);
            __esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
            __esDecorate(this, null, _showSelectionIcon_decorators, { kind: "accessor", name: "showSelectionIcon", static: false, private: false, access: { has: obj => "showSelectionIcon" in obj, get: obj => obj.showSelectionIcon, set: (obj, value) => { obj.showSelectionIcon = value; } }, metadata: _metadata }, _showSelectionIcon_initializers, _showSelectionIcon_extraInitializers);
            __esDecorate(this, null, _subMenuOpen_decorators, { kind: "accessor", name: "subMenuOpen", static: false, private: false, access: { has: obj => "subMenuOpen" in obj, get: obj => obj.subMenuOpen, set: (obj, value) => { obj.subMenuOpen = value; } }, metadata: _metadata }, _subMenuOpen_initializers, _subMenuOpen_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #submenu_accessor_storage = __runInitializers(this, _submenu_initializers, void 0);
        /**
         * The ID of the associated submenu
         * @attribute
         */
        get submenu() { return this.#submenu_accessor_storage; }
        set submenu(value) { this.#submenu_accessor_storage = value; }
        #selected_accessor_storage = (__runInitializers(this, _submenu_extraInitializers), __runInitializers(this, _selected_initializers, false
        /**
         * The value associated with this menu item. Use it to identify value associated with the menu item,
         * when selected.
         * @attribute
         */
        ));
        /**
         * Whether this menu item is selected
         * @attribute
         */
        get selected() { return this.#selected_accessor_storage; }
        set selected(value) { this.#selected_accessor_storage = value; }
        #value_accessor_storage = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _value_initializers, void 0));
        /**
         * The value associated with this menu item. Use it to identify value associated with the menu item,
         * when selected.
         * @attribute
         */
        get value() { return this.#value_accessor_storage; }
        set value(value) { this.#value_accessor_storage = value; }
        #showSelectionIcon_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _showSelectionIcon_initializers, false
        /**
         * Whether the menu item has a sub-menu
         */
        ));
        /**
         * Whether to automatically show a check icon when selected
         * @attribute
         */
        get showSelectionIcon() { return this.#showSelectionIcon_accessor_storage; }
        set showSelectionIcon(value) { this.#showSelectionIcon_accessor_storage = value; }
        /**
         * Whether the menu item has a sub-menu
         */
        get hasSubMenu() {
            return !!this.submenu && !!this.subMenuElement;
        }
        /**
         * Reference to the sub-menu element
         */
        get subMenuElement() {
            if (!this.submenu)
                return null;
            return findElementInShadowRoots(this.submenu, this);
        }
        #subMenuOpen_accessor_storage = (__runInitializers(this, _showSelectionIcon_extraInitializers), __runInitializers(this, _subMenuOpen_initializers, false));
        /**
         * Whether the sub-menu is open
         */
        get subMenuOpen() { return this.#subMenuOpen_accessor_storage; }
        set subMenuOpen(value) { this.#subMenuOpen_accessor_storage = value; }
        constructor() {
            super();
            __runInitializers(this, _subMenuOpen_extraInitializers);
            this.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
            this.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
            this.addEventListener('click', this.handleMenuItemClick.bind(this));
        }
        connectedCallback() {
            super.connectedCallback();
            this.setAttribute('role', 'menuitem');
            // Generate ID if not present (needed for submenu anchoring)
            if (!this.id) {
                this.id = nanoid(6);
            }
            // Initialize selection state
            this.updateSelectionState();
        }
        updated(changedProperties) {
            super.updated(changedProperties);
            if (changedProperties.has('submenu')) {
                this.updateAccessibility();
                this.setupSubmenuConnection();
            }
            if (changedProperties.has('selected')) {
                this.updateSelectionState();
            }
        }
        /**
         * Sets up the connection between this menu item and its submenu
         */
        setupSubmenuConnection() {
            if (this.subMenuElement) {
                this.subMenuElement.anchor = this.id;
                // Find parent menu and set it on the submenu
                const parentMenu = this.closest('ui-menu, ui-sub-menu');
                if (parentMenu) {
                    this.subMenuElement.setParentMenu(parentMenu);
                }
            }
        }
        /**
         * Updates accessibility attributes
         */
        updateAccessibility() {
            if (this.hasSubMenu) {
                this.setAttribute('aria-haspopup', 'true');
                this.setAttribute('aria-expanded', String(this.subMenuOpen));
            }
            else {
                this.removeAttribute('aria-haspopup');
                this.removeAttribute('aria-expanded');
            }
        }
        /**
         * Updates the selection state styling
         */
        updateSelectionState() {
            if (this.selected) {
                this.classList.add('select');
                this.setAttribute('aria-selected', 'true');
            }
            else {
                this.classList.remove('select');
                this.setAttribute('aria-selected', 'false');
            }
        }
        /**
         * Handles mouse enter events
         */
        handleMouseEnter() {
            if (this.hasSubMenu && !this.subMenuOpen) {
                this.openSubMenu();
            }
        }
        /**
         * Handles mouse leave events
         */
        handleMouseLeave() {
            // Close sub-menu after a delay to allow moving to sub-menu
            setTimeout(() => {
                if (this.subMenuOpen && !this.matches(':hover') && !this.subMenuElement?.matches(':hover')) {
                    this.closeSubMenu();
                }
            }, 100);
        }
        /**
         * Handles click events
         */
        handleClick(e) {
            if (this.hasSubMenu) {
                e.preventDefault();
                e.stopPropagation();
                this.toggleSubMenu();
            }
            else {
                super.handleClick(e);
            }
        }
        /**
         * Handles menu item click events
         */
        handleMenuItemClick(e) {
            this.handleClick(e);
        }
        /**
         * Opens the sub-menu
         */
        openSubMenu() {
            if (!this.hasSubMenu || this.subMenuOpen)
                return;
            this.subMenuOpen = true;
            this.updateAccessibility();
            this.subMenuElement?.show();
            this.dispatchEvent(new CustomEvent('submenu-open', {
                detail: { subMenu: this.subMenuElement },
                bubbles: false,
                composed: true,
            }));
        }
        /**
         * Closes the sub-menu
         */
        closeSubMenu() {
            if (!this.subMenuOpen)
                return;
            this.subMenuOpen = false;
            this.updateAccessibility();
            this.subMenuElement?.hide();
        }
        /**
         * Toggles the sub-menu
         */
        toggleSubMenu() {
            if (this.subMenuOpen) {
                this.closeSubMenu();
            }
            else {
                this.openSubMenu();
            }
        }
        /**
         * Handles sub-menu item selection
         */
        handleSubMenuSelect(e) {
            // Bubble up the selection event
            this.dispatchEvent(new CustomEvent('select', {
                detail: e.detail,
                bubbles: false,
                composed: true,
            }));
        }
        render() {
            const classes = classMap({
                'surface': true,
                'menu-item': true,
                'menu-item-with-submenu': this.hasSubMenu,
                'submenu-open': this.subMenuOpen,
            });
            return html `
      ${this.renderFocusRing()} ${this.renderRipple()}
      <div class=${classes} role="menuitem">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>
    `;
        }
        renderEnd() {
            return html `<div class="end">
      <slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
      <span class="trailing-supporting-text"><slot name="end-text"></slot></span>
      ${this.hasSubMenu ? html `<ui-icon class="menu-item-arrow">arrow_right</ui-icon>` : ''}
    </div>`;
        }
        renderStart() {
            const showCheckIcon = this.showSelectionIcon && this.selected;
            return html `<div class="start">
      ${showCheckIcon ? html `<ui-icon class="selection-check">check</ui-icon>` : ''}
      <slot name="start" @slotchange=${this.handleEndSlotChange}></slot>
    </div>`;
        }
    };
})();
/**
 * Material Design 3 Menu Item component.
 *
 * @slot - The menu item content (label, icon, etc.)
 * @fires select - Dispatched when the menu item is selected
 * @fires submenu-open - Dispatched when a sub-menu is opened
 */
export default UiMenuItem;
//# sourceMappingURL=MenuItem.js.map