import { Host, h } from "@stencil/core";
export class SpwHeaderNavigationDropdown {
    constructor() {
        /** Texte du bouton "Voir plus" (uniquement en mode megamenu) */
        this.viewMoreText = 'Voir plus';
        this.shouldShowViewMore = false;
        this.parentHref = '#';
        this.parentTarget = '_self';
        this.dropdownLevel = 1;
        this.isMegamenu = false;
    }
    componentDidLoad() {
        this.calculateDropdownLevel();
        this.isMegamenu = this.isParentMegamenu();
        this.checkIfShouldShowViewMore();
        const slot = this.el.shadowRoot.querySelector('slot');
        if (slot) {
            const mutationObserver = new MutationObserver(() => {
                this.checkIfShouldShowViewMore();
            });
            mutationObserver.observe(slot, { childList: true, subtree: true });
        }
    }
    calculateDropdownLevel() {
        let level = 1;
        let parent = this.el.parentElement;
        while (parent && parent.tagName !== 'SPW-HEADER-NAVIGATION') {
            if (parent.tagName === 'SPW-HEADER-NAVIGATION-DROPDOWN') {
                level++;
            }
            parent = parent.parentElement;
        }
        this.dropdownLevel = level;
    }
    checkIfShouldShowViewMore() {
        if (this.dropdownLevel !== 2) {
            this.shouldShowViewMore = false;
            return;
        }
        if (!this.isMegamenu) {
            this.shouldShowViewMore = false;
            return;
        }
        const slot = this.el.shadowRoot.querySelector('slot');
        if (!slot)
            return;
        const assignedElements = slot.assignedElements({ flatten: true });
        const navItems = Array.from(assignedElements).filter(el => el.tagName === 'SPW-HEADER-NAVIGATION-ITEM');
        const level3Items = navItems.filter(item => {
            const level = item.getAttribute('data-level');
            return level === '3';
        });
        this.getParentLink();
        this.shouldShowViewMore = level3Items.length > 7 || level3Items.length === 0;
    }
    isParentMegamenu() {
        let parent = this.el.parentElement;
        while (parent) {
            if (parent.tagName === 'SPW-HEADER-NAVIGATION-ITEM') {
                const level = parent.getAttribute('data-level');
                if (level === '1') {
                    return parent.getAttribute('variant') === 'megamenu';
                }
            }
            parent = parent.parentElement;
        }
        return false;
    }
    getParentLink() {
        let parent = this.el.parentElement;
        while (parent) {
            if (parent.tagName === 'SPW-HEADER-NAVIGATION-ITEM') {
                const link = parent.querySelector('a');
                if (link) {
                    this.parentHref = link.getAttribute('href') || '#';
                    this.parentTarget = link.getAttribute('target') || '_self';
                }
                break;
            }
            parent = parent.parentElement;
        }
    }
    render() {
        return (h(Host, { key: 'ba7103f29234e8bae802d8aecf08f942b9fa5481', class: { 'spw-header-navigation-dropdown--is-megamenu': this.isMegamenu } }, h("div", { key: '7371574a8be7084a053cf9fa91eb5c5239fd0769', class: "spw-header-navigation-dropdown" }, h("slot", { key: '1609aa6db756e127e8cd5ca954fee0c4c0b63486' }), this.shouldShowViewMore && (h("spw-link", { key: '226401939eb4327ebe413c73860e58439fb7e7c7', icon: "fa-arrow-right", class: "spw-header-navigation-item--view-more", href: this.parentHref, target: this.parentTarget }, this.viewMoreText)))));
    }
    static get is() { return "spw-header-navigation-dropdown"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-header-navigation-dropdown.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-header-navigation-dropdown.css"]
        };
    }
    static get properties() {
        return {
            "viewMoreText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Texte du bouton \"Voir plus\" (uniquement en mode megamenu)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "view-more-text",
                "defaultValue": "'Voir plus'"
            }
        };
    }
    static get states() {
        return {
            "shouldShowViewMore": {},
            "parentHref": {},
            "parentTarget": {},
            "dropdownLevel": {},
            "isMegamenu": {}
        };
    }
    static get elementRef() { return "el"; }
}
