import { h, Host } from "@stencil/core";
import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
import { ListKeyboardNavigationController } from "../../utils/aria/list-keyboard-controller";
import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
import logo from "../../assets/icons/Logo.svg";
export class LmvzHeader extends ReactiveControllerHost {
    el;
    get validationEl() {
        return this.el;
    }
    primarySlot;
    secondarySlot;
    secondaryNav;
    keyboardNavigationController = new ListKeyboardNavigationController(this);
    get primaryMenuitems() {
        return this.primarySlot?.assignedElements({ flatten: false }) || [];
    }
    get secondaryMenuitems() {
        return this.secondarySlot?.assignedElements({ flatten: true }) || [];
    }
    get role() {
        return 'banner';
    }
    lmvzActiveNav;
    get secondarySlotName() {
        return `connect-nav-${this.lmvzActiveNav}`;
    }
    constructor() {
        super();
        this.addController(new AriaValidationController(this, { reValidateOnPropChanges: true }));
        this.addController(this.keyboardNavigationController);
    }
    handleActiveNavChange() {
        this.updateElementsActive();
    }
    componentDidLoad() {
        this.primarySlot?.addEventListener('slotchange', this.handlePrimaryNavItemsChange.bind(this));
        this.handlePrimaryNavItemsChange();
        this.secondarySlot?.addEventListener('slotchange', this.handleSecondaryNavItemsChange.bind(this));
        super.componentDidLoad();
    }
    handlePrimaryNavItemsChange() {
        const items = this.primaryMenuitems;
        if (!items.length) {
            console.warn('Primary slot has no assigned elements. Please add navigation items to the primary slot.');
            return;
        }
        items.forEach((el) => {
            el.setAttribute('aria-haspopup', 'true');
            el.setAttribute('aria-controls', `nav-secondary`);
        });
        this.updateElementsActive();
        this.updateKeyboardNavSubjects();
    }
    handleSecondaryNavItemsChange() {
        const items = this.secondaryMenuitems;
        if (!items.length) {
            return;
        }
        this.updateKeyboardNavSubjects();
    }
    updateKeyboardNavSubjects() {
        this.keyboardNavigationController.updateElements([...this.primaryMenuitems, ...this.secondaryMenuitems]);
    }
    updateElementsActive() {
        const items = this.primaryMenuitems;
        if (!items.length)
            return;
        let label = '';
        items.forEach((el) => {
            const isActive = el.id === this.lmvzActiveNav;
            if (isActive)
                label = el.textContent || el.id;
            el.setAttribute('aria-expanded', isActive ? 'true' : 'false');
        });
        if (!label)
            return;
        this.secondaryNav?.setAttribute('aria-label', `Untermenü für ${label}`);
    }
    delegateFocus() {
        const firstFocusable = this.primaryMenuitems[0];
        if (firstFocusable) {
            firstFocusable.focus();
        }
    }
    render() {
        return (h(Host, { key: '96626b8d29cdefc8ed97a7bb68a689ff6155d2c7', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '41ac004bdc6c2c6a1f8e3d293f6b0c3727c27aff', class: "brand" }, h("slot", { key: '8e33150a54c8b8070b22db51c8584e06dd06dd5c', name: "brand" }, h("img", { key: '889955c7335d64f2c8d0b2e032db3dd64a27cbd2', id: "fallback-logo-lmvz", src: logo, alt: "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '37b6ef465d320c325e0c830bcc91ea3a575d2690', "aria-label": "Hauptnavigation" }, h("div", { key: '7a0ec1a78d6eee3b3e37f55f872806b0791c2156', role: "menubar", class: "primary-menubar" }, h("slot", { key: 'e0403633c6acd137c94b1552cc7f08e3549550d3', name: "nav-primary", ref: (el) => (this.primarySlot = el) }), h("div", { key: '4e377f38a0b94a766f9001174729e5763fa0a194', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: (el) => (this.secondaryNav = el) }, h("slot", { key: '368e461f239498c706a3c9bb27a7b05de2b79cac', name: this.secondarySlotName, ref: (el) => (this.secondarySlot = el) })))), h("div", { key: '8ffaf8d6f1254644b48dc0a40b9f552339ecc690', class: "actions" }, h("slot", { key: '5b679885e4fa111d66e993458ab7f5092d8179d4', name: "actions" }))));
    }
    static get is() { return "lmvz-header"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["./lmvz-header.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["lmvz-header.css"]
        };
    }
    static get properties() {
        return {
            "role": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": true,
                "setter": false,
                "reflect": true,
                "attribute": "role",
                "defaultValue": "'banner'"
            },
            "lmvzActiveNav": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "lmvz-active-nav"
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "lmvzActiveNav",
                "methodName": "handleActiveNavChange"
            }];
    }
}
