import { Host, h } from "@stencil/core";
export class SpwDropdownItem {
    constructor() {
        /** Si true, l'item est désactivé */
        this.disabled = false;
        /** Variante d'icône font-awesome */
        this.iconVariant = 'fa-regular';
        this.hasSubItems = false;
        this.subItemsOpen = false;
        this.handleToggleSubItems = (event) => {
            event.preventDefault();
            event.stopPropagation();
            if (this.disabled)
                return;
            this.subItemsOpen = !this.subItemsOpen;
        };
        this.handleItemClick = (event) => {
            if (this.disabled)
                return;
            if (this.hasSubItems && !this.href) {
                event.preventDefault();
                event.stopPropagation();
                this.subItemsOpen = !this.subItemsOpen;
            }
        };
        this.handleItemKeyDown = (event) => {
            var _a;
            if (this.disabled)
                return;
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                if (this.hasSubItems && !this.href) {
                    this.subItemsOpen = !this.subItemsOpen;
                }
                else if (this.href) {
                    (_a = this.el.querySelector('a')) === null || _a === void 0 ? void 0 : _a.click();
                }
            }
        };
    }
    componentDidLoad() {
        this.checkForSubItems();
        this.setupMutationObserver();
        setTimeout(() => {
            this.checkForSubItems();
        }, 0);
    }
    componentDidUpdate() {
        this.checkForSubItems();
    }
    disconnectedCallback() {
        if (this.mutationObserver) {
            this.mutationObserver.disconnect();
        }
    }
    setupMutationObserver() {
        this.mutationObserver = new MutationObserver(() => {
            this.checkForSubItems();
        });
        this.mutationObserver.observe(this.el, {
            childList: true,
            subtree: true,
        });
    }
    checkForSubItems() {
        const subItems = this.el.querySelector('[slot="sub-items"]');
        const newHasSubItems = subItems !== null && (subItems.children.length > 0 || subItems.childNodes.length > 0);
        if (this.hasSubItems !== newHasSubItems) {
            this.hasSubItems = newHasSubItems;
        }
    }
    get classes() {
        return {
            'spw-dropdown-item': true,
            'spw-dropdown-item--disabled': this.disabled,
            'spw-dropdown-item--has-sub-items': this.hasSubItems,
            'spw-dropdown-item--sub-items-open': this.subItemsOpen,
        };
    }
    render() {
        const Tag = this.href && !this.disabled ? 'a' : 'div';
        const toggleClasses = {
            'spw-dropdown-item__toggle': true,
            'spw-dropdown-item__toggle--open': this.subItemsOpen,
        };
        return (h(Host, { key: '9972c17813e0f7be9d07188a6a6596fc5f3e9b75' }, h(Tag, { key: '9048817b668d6f9ea4294f327af676b2128b2632', class: this.classes, href: this.href, "aria-disabled": this.disabled ? 'true' : undefined, role: "menuitem", tabindex: this.disabled ? -1 : 0, onClick: this.handleItemClick, onKeyDown: this.handleItemKeyDown }, this.icon && (h("div", { key: 'a43132e6f697d77849d158164bcdbe783b56ab21', class: "spw-dropdown-item__icon" }, h("spw-icon", { key: '5c8643b3c22b79c1a665c420edb9529453699341', variant: this.iconVariant, icon: this.icon }))), h("div", { key: '65db2295b5086d4e342234a336251ec282b9eebc', class: "spw-dropdown-item__content" }, h("div", { key: '54d0059dd24a51a136b0afee730cea8c25f02ecb', class: "spw-dropdown-item__label" }, h("slot", { key: '4e992a877d20ec0b84c83a8f5786eec8301a1e63' })), this.hasSubItems && (h("div", { key: 'f8a34e4a575ae202670cb86ec3095e0b7b717ed2', class: toggleClasses, onClick: this.handleToggleSubItems }, h("spw-icon", { key: '44593757e5e18c481ed0faab171adaf6129e29fe', icon: "fa-chevron-down" }))))), this.hasSubItems && (h("div", { key: 'fde76f69a90e770c732899d326c4880915b0baa7', class: "spw-dropdown-item__sub-items", style: { display: this.subItemsOpen ? 'block' : 'none' } }, h("slot", { key: '2b1f6087cd1063dd3a028b9ba2f091702f960290', name: "sub-items" })))));
    }
    static get is() { return "spw-dropdown-item"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-dropdown-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-dropdown-item.css"]
        };
    }
    static get properties() {
        return {
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Lien href pour l'item"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Si true, l'item est d\u00E9sactiv\u00E9"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Ic\u00F4ne optionnelle \u00E0 afficher"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "iconVariant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'fa-solid' | 'fa-brands' | 'fa-regular'",
                    "resolved": "\"fa-brands\" | \"fa-regular\" | \"fa-solid\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Variante d'ic\u00F4ne font-awesome"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon-variant",
                "defaultValue": "'fa-regular'"
            }
        };
    }
    static get states() {
        return {
            "hasSubItems": {},
            "subItemsOpen": {}
        };
    }
    static get elementRef() { return "el"; }
}
