import { Host, h, } from "@stencil/core";
import { isSlotUsed, onComponentRequiredPropUndefined, removeDisabledFalse, isPropDefined, } from "../../utils/helpers";
import Check from "../../assets/check-icon.svg";
import Chevron from "../../assets/chevron-icon.svg";
/**
 * @slot icon - Content will be placed to the left of the menu item label.
 */
export class MenuItem {
    constructor() {
        /**
         * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.
         */
        this.checked = false;
        /**
         * If `true`, the menu item will be in disabled state.
         */
        this.disabled = false;
        /**
         * The variant of the menu item.
         */
        this.variant = "default";
        this.handleClick = (e) => {
            if (isPropDefined(this.submenuTriggerFor)) {
                this.triggerPopoverMenuInstance.emit();
            }
            else if (this.variant === "toggle") {
                e.preventDefault();
                this.checked = !this.checked;
                this.icToggleChecked.emit({
                    checked: this.checked,
                });
            }
            this.handleMenuItemClick.emit(this.el);
        };
        this.getMenuItemAriaLabel = () => {
            let ariaLabel = this.label;
            if (isPropDefined(this.description)) {
                ariaLabel = `${ariaLabel}, ${this.description}`;
            }
            if (isPropDefined(this.keyboardShortcutLabel)) {
                ariaLabel = `${ariaLabel}, ${this.keyboardShortcutLabel}`;
            }
            if (this.variant === "destructive") {
                ariaLabel = `${ariaLabel}, destructive`;
            }
            if (isPropDefined(this.submenuTriggerFor)) {
                ariaLabel = `${ariaLabel}, triggers submenu`;
            }
            if (this.el.classList.contains("ic-popover-submenu-back-button")) {
                ariaLabel = "Go back to parent menu";
            }
            const parentEl = this.el.parentElement;
            if (parentEl &&
                parentEl.tagName === "IC-MENU-GROUP" &&
                parentEl.label) {
                return `${ariaLabel}, ${parentEl.label} menu group`;
            }
            else {
                return ariaLabel;
            }
        };
    }
    watchDisabledHandler() {
        removeDisabledFalse(this.disabled, this.el);
    }
    componentWillLoad() {
        // This ensures that trigger menu items are always set to the default variant
        if (isPropDefined(this.submenuTriggerFor) && this.variant !== "default") {
            this.variant = "default";
        }
        removeDisabledFalse(this.disabled, this.el);
    }
    componentDidLoad() {
        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Menu Item");
    }
    handleHostClick(e) {
        if (this.disabled) {
            e.stopImmediatePropagation();
        }
    }
    render() {
        // A sub-component to layout the menu information correctly in ic-button
        const MenuItemInformation = () => {
            return (h("div", { class: "menu-item-info" }, h("div", { class: "menu-labels" }, h("ic-typography", { class: "menu-item-label" }, this.label), this.keyboardShortcutLabel && (h("ic-typography", { variant: "caption", class: "shortcut" }, this.keyboardShortcutLabel))), this.description && (h("ic-typography", { class: "menu-item-description", variant: "caption" }, this.description))));
        };
        return (h(Host, { class: {
                ["ic-menu-item-disabled"]: !!this.disabled,
                [`ic-menu-item-variant-${this.variant}`]: this.variant !== undefined,
            } }, h("ic-button", { fullWidth: true, variant: "tertiary", onClick: this.handleClick, href: isPropDefined(this.href), hreflang: isPropDefined(this.hreflang), target: isPropDefined(this.target), rel: isPropDefined(this.rel), referrerpolicy: this.referrerpolicy, role: this.variant === "toggle" ? "menuitemcheckbox" : "menuitem", "aria-disabled": `${this.disabled}`, "aria-checked": this.variant === "toggle"
                ? this.checked
                    ? "true"
                    : "false"
                : undefined, "aria-label": this.getMenuItemAriaLabel(), "aria-haspopup": isPropDefined(this.submenuTriggerFor) ||
                this.el.classList.contains("ic-popover-submenu-back-button")
                ? "menu"
                : false }, h("div", { class: "focus-border" }, isSlotUsed(this.el, "icon") && (h("span", { class: "icon" }, h("slot", { name: "icon" }))), h(MenuItemInformation, null), this.variant === "toggle" && (h("span", { class: {
                ["check-icon"]: true,
                ["hide"]: !this.checked,
            }, "aria-hidden": "true", innerHTML: Check })), isPropDefined(this.submenuTriggerFor) && (h("span", { class: { ["submenu-icon"]: true }, "aria-hidden": "true", innerHTML: Chevron }))))));
    }
    static get is() { return "ic-menu-item"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-menu-item.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-menu-item.css"]
        };
    }
    static get properties() {
        return {
            "checked": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`."
                },
                "getter": false,
                "setter": false,
                "attribute": "checked",
                "reflect": true,
                "defaultValue": "false"
            },
            "description": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The description displayed in the menu item, below the label."
                },
                "getter": false,
                "setter": false,
                "attribute": "description",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the menu item will be in disabled state."
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The URL that the link points to. This will render the menu item as an \"a\" tag."
                },
                "getter": false,
                "setter": false,
                "attribute": "href",
                "reflect": false
            },
            "hreflang": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The human language of the linked URL."
                },
                "getter": false,
                "setter": false,
                "attribute": "hreflang",
                "reflect": false
            },
            "keyboardShortcutLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The label describing the keyboard shortcut for a menu item's action."
                },
                "getter": false,
                "setter": false,
                "attribute": "keyboard-shortcut-label",
                "reflect": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The label to display in the menu item."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "referrerpolicy": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ReferrerPolicy",
                    "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\" | undefined",
                    "references": {
                        "ReferrerPolicy": {
                            "location": "global",
                            "id": "global::ReferrerPolicy"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "How much of the referrer to send when following the link."
                },
                "getter": false,
                "setter": false,
                "attribute": "referrerpolicy",
                "reflect": false
            },
            "rel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The relationship of the linked URL as space-separated link types."
                },
                "getter": false,
                "setter": false,
                "attribute": "rel",
                "reflect": false
            },
            "submenuTriggerFor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "This references the popover menu instance that the menu item is a trigger for. If this prop is set, then the variant will always be default."
                },
                "getter": false,
                "setter": false,
                "attribute": "submenu-trigger-for",
                "reflect": false
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
                },
                "getter": false,
                "setter": false,
                "attribute": "target",
                "reflect": false
            },
            "variant": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "IcMenuItemVariants",
                    "resolved": "\"default\" | \"destructive\" | \"toggle\" | undefined",
                    "references": {
                        "IcMenuItemVariants": {
                            "location": "import",
                            "path": "./ic-menu-item.types",
                            "id": "src/components/ic-menu-item/ic-menu-item.types.ts::IcMenuItemVariants"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The variant of the menu item."
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": true,
                "defaultValue": "\"default\""
            }
        };
    }
    static get events() {
        return [{
                "method": "childBlur",
                "name": "childBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Emitted when item loses focus."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "handleMenuItemClick",
                "name": "handleMenuItemClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Emitted when the user clicks a menu item."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "HTMLIcMenuItemElement",
                    "resolved": "HTMLIcMenuItemElement",
                    "references": {
                        "HTMLIcMenuItemElement": {
                            "location": "global",
                            "id": "global::HTMLIcMenuItemElement"
                        }
                    }
                }
            }, {
                "method": "icToggleChecked",
                "name": "icToggleChecked",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the user clicks a menu item that is set to the toggle variant."
                },
                "complexType": {
                    "original": "{\n    checked: boolean;\n  }",
                    "resolved": "{ checked: boolean; }",
                    "references": {}
                }
            }, {
                "method": "triggerPopoverMenuInstance",
                "name": "triggerPopoverMenuInstance",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Emitted when the user clicks a menu item that triggers a popover menu instance."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "watchDisabledHandler"
            }];
    }
    static get listeners() {
        return [{
                "name": "click",
                "method": "handleHostClick",
                "target": undefined,
                "capture": true,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-menu-item.js.map
