import { h } from "@stencil/core";
export class SpwSidebarNavigationItem {
    constructor() {
        /** A appliquer sur spw-sidebar-navigation-item, permet de mettre en évidence un état actif */
        this.active = false;
        /** A appliquer sur spw-sidebar-navigation-item, permet de définir si l'élément est disabled ou non */
        this.disabled = false;
        /** A appliquer sur spw-sidebar-navigation-item, permet de choisir la variante d'icônes font-awesome */
        this.iconVariant = 'fa-regular';
        /** A appliquer sur spw-sidebar-navigation-item, si true, le clic sur l'item entier ouvre le dropdown (utile quand il n'y a pas de page physique) */
        this.openOnClick = false;
        this.hasDropdown = false;
        this.dropdownOpen = false;
        this.navExpanded = false;
        this.hasActiveChild = false;
        this.checkNavExpanded = () => {
            this.navExpanded = document.body.classList.contains('spw-sidebar-expanded');
        };
        this.handleDropdownToggle = (event) => {
            var _a, _b;
            event.preventDefault();
            event.stopPropagation();
            if (this.disabled)
                return;
            const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown');
            if (dropdown) {
                dropdown.open = !dropdown.open;
                if (dropdown.open) {
                    (_a = dropdown.setAttribute) === null || _a === void 0 ? void 0 : _a.call(dropdown, 'open', '');
                }
                else {
                    (_b = dropdown.removeAttribute) === null || _b === void 0 ? void 0 : _b.call(dropdown, 'open');
                }
                this.dropdownOpen = dropdown.open;
            }
        };
        this.handleItemClick = (event) => {
            if (this.disabled)
                return;
            if (this.openOnClick && this.hasDropdown) {
                const clickedElement = event.target;
                const isChildNavigationItem = clickedElement.closest('spw-sidebar-navigation-item') !== this.el;
                if (isChildNavigationItem) {
                    return;
                }
                event.preventDefault();
                event.stopPropagation();
                if (!this.navExpanded) {
                    document.body.classList.add('spw-sidebar-expanded');
                    setTimeout(() => {
                        this.openDropdown();
                    }, 300);
                }
                else {
                    this.toggleDropdown();
                }
            }
        };
        this.openDropdown = () => {
            var _a;
            const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown');
            if (dropdown) {
                dropdown.open = true;
                (_a = dropdown.setAttribute) === null || _a === void 0 ? void 0 : _a.call(dropdown, 'open', '');
                this.dropdownOpen = true;
            }
        };
        this.toggleDropdown = () => {
            var _a, _b;
            const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown');
            if (dropdown) {
                dropdown.open = !dropdown.open;
                if (dropdown.open) {
                    (_a = dropdown.setAttribute) === null || _a === void 0 ? void 0 : _a.call(dropdown, 'open', '');
                }
                else {
                    (_b = dropdown.removeAttribute) === null || _b === void 0 ? void 0 : _b.call(dropdown, 'open');
                }
                this.dropdownOpen = dropdown.open;
            }
        };
    }
    componentDidLoad() {
        this.checkForDropdown();
        this.setupMutationObserver();
        this.checkNavExpanded();
        this.setupBodyClassObserver();
        this.propagateActiveStateToParents();
    }
    componentDidUpdate() {
        this.checkForDropdown();
    }
    disconnectedCallback() {
        if (this.mutationObserver) {
            this.mutationObserver.disconnect();
        }
        if (this.bodyClassObserver) {
            this.bodyClassObserver.disconnect();
        }
    }
    setupMutationObserver() {
        this.mutationObserver = new MutationObserver(() => {
            this.checkForDropdown();
        });
        this.mutationObserver.observe(this.el, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['open'],
        });
    }
    checkForDropdown() {
        var _a;
        const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown');
        this.hasDropdown = dropdown !== null;
        if (dropdown) {
            this.dropdownOpen = !!dropdown.open || ((_a = dropdown.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(dropdown, 'open'));
        }
        else {
            this.dropdownOpen = false;
        }
    }
    setupBodyClassObserver() {
        this.bodyClassObserver = new MutationObserver(() => {
            this.checkNavExpanded();
        });
        this.bodyClassObserver.observe(document.body, {
            attributes: true,
            attributeFilter: ['class'],
        });
    }
    propagateActiveStateToParents() {
        if (this.active) {
            this.activateParentItems();
        }
        const childItems = this.el.querySelectorAll('spw-sidebar-navigation-item');
        const hasActiveDescendant = Array.from(childItems).some((child) => child.active === true || child.getAttribute('active') === 'true');
        if (hasActiveDescendant) {
            this.hasActiveChild = true;
            this.openDropdown();
        }
    }
    activateParentItems() {
        let parent = this.el.parentElement;
        while (parent) {
            const parentItem = parent.closest('spw-sidebar-navigation-item');
            if (parentItem && parentItem !== this.el) {
                parentItem.hasActiveChild = true;
                const dropdown = parentItem.querySelector(':scope > spw-sidebar-navigation-dropdown');
                if (dropdown) {
                    dropdown.open = true;
                    dropdown.setAttribute('open', '');
                }
                parent = parentItem.parentElement;
            }
            else {
                break;
            }
        }
    }
    get classes() {
        return {
            'spw-sidebar-navigation-item': true,
            'spw-sidebar-navigation-item--active': this.active || this.hasActiveChild,
            'spw-sidebar-navigation-item--disabled': this.disabled,
            'spw-sidebar-navigation-item--has-dropdown': this.hasDropdown,
            'spw-sidebar-navigation-item--dropdown-opened': this.dropdownOpen,
        };
    }
    render() {
        const Tag = this.href && !this.disabled && !this.openOnClick ? 'a' : 'div';
        const iconContent = h("spw-icon", { key: '4700c5778d91fb367ffcf90c55b31d1eb78282e7', variant: this.iconVariant, icon: this.icon });
        const iconDiv = (h("div", { key: '2406404742b25ff81bebd21d17e397b631ab950c', class: "spw-sidebar-navigation-item__icon" }, this.bubble && h("span", { key: '1cffd6dae86d4f0c2e0443a8b0dbd174ca657999', class: "spw-sidebar-navigation-item__bubble" }, this.bubble), iconContent));
        const iconWithBubble = this.tooltipTitle ? (h("spw-tooltip", { cursor: this.disabled ? 'disabled' : 'pointer', "tooltip-title": this.tooltipTitle, direction: "right", visible: !this.navExpanded }, iconDiv)) : (iconDiv);
        const toggleClasses = {
            'spw-sidebar-navigation-item__dropdown-toggle': true,
            'spw-sidebar-navigation-item__dropdown-toggle--open': this.dropdownOpen,
        };
        return (h(Tag, { key: 'ccb7079d463215f671582dfe3f4d41acb2a53c84', class: this.classes, href: this.openOnClick ? undefined : this.href, "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : 0, onClick: this.openOnClick ? this.handleItemClick : undefined }, this.icon && iconWithBubble, h("div", { key: '557a4716bddf11ddad7a738feeac2d2bbffad344', class: "spw-sidebar-navigation-item__content" }, h("div", { key: 'a7052155045a1d884b68bf8a83ab6387eef18c9d', class: "spw-sidebar-navigation-item__content-label" }, h("slot", { key: '51bb492ca65770f8ddb4232fdf640a0b813dee4b' })), this.hasDropdown && (h("div", { key: '519714001a45ccfdd55b074f34fb2540b214b358', class: toggleClasses, onClick: this.handleDropdownToggle, tabIndex: this.disabled ? -1 : 0 }, h("spw-icon", { key: 'fec943dfcfcb4ec8047df513aae3e34a2b66db7e', icon: "fa-chevron-down" }))), h("slot", { key: '7f241804786a5a00dee11516dbee994779b05c4b', name: "dropdown" }))));
    }
    static get is() { return "spw-sidebar-navigation-item"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-sidebar-navigation-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-sidebar-navigation-item.css"]
        };
    }
    static get properties() {
        return {
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A appliquer sur spw-sidebar-navigation-item, permet de d\u00E9finir un href sur l'\u00E9l\u00E9ment"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A appliquer sur spw-sidebar-navigation-item, permet de d\u00E9finir une r\u00E9f\u00E9rence font-awesome sur l'\u00E9l\u00E9ment"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "active": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A appliquer sur spw-sidebar-navigation-item, permet de mettre en \u00E9vidence un \u00E9tat actif"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "active",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A appliquer sur spw-sidebar-navigation-item, permet de d\u00E9finir si l'\u00E9l\u00E9ment est disabled ou non"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "bubble": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A appliquer sur spw-sidebar-navigation-item, permet d'afficher une bulle de notification avec un nombre"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "bubble"
            },
            "tooltipTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A appliquer sur spw-sidebar-navigation-item, permet de d\u00E9finir un tooltip au hover"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-title"
            },
            "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": "A appliquer sur spw-sidebar-navigation-item, permet de choisir la variante d'ic\u00F4nes font-awesome"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon-variant",
                "defaultValue": "'fa-regular'"
            },
            "openOnClick": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A appliquer sur spw-sidebar-navigation-item, si true, le clic sur l'item entier ouvre le dropdown (utile quand il n'y a pas de page physique)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "open-on-click",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "hasDropdown": {},
            "dropdownOpen": {},
            "navExpanded": {},
            "hasActiveChild": {}
        };
    }
    static get elementRef() { return "el"; }
}
