import { h, Host } from "@stencil/core";
import { ListKeyboardNavigationController } from "../../utils/list-keyboard-controller";
import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
import { AriaValidationController } from "../../utils/validation/aria-validation-controller";
export class LmvzHeader extends ReactiveControllerHost {
    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.handlePrimaryNavChange.bind(this));
        this.handlePrimaryNavChange();
        this.secondarySlot.addEventListener('slotchange', this.handleSecondaryNavChange.bind(this));
    }
    handlePrimaryNavChange() {
        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();
    }
    handleSecondaryNavChange() {
        const items = this.secondaryMenuitems;
        if (!items.length) {
            return;
        }
        this.keyboardNavigationController.updateElements([...this.primaryMenuitems, ...this.secondaryMenuitems]);
    }
    updateElementsActive() {
        const items = this.primaryMenuitems;
        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');
        });
        this.secondaryNav.setAttribute('aria-label', `Untermenü für ${label}`);
    }
    delegateFocus() {
        const firstFocusable = this.primaryMenuitems[0];
        if (firstFocusable) {
            firstFocusable.focus();
        }
    }
    render() {
        return (h(Host, { key: '58934683ff442801eb34f025ac809631f93a27e8', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '35d3eadfabb70f83b313f946c8d31f9c223e8344', class: "brand" }, h("slot", { key: '5ce98314d980d63e1c87f508d96119aca2e702a9', name: "brand" }, h("lmvz-icon", { key: 'b24e61a9071d81948d506a8c545e012d3f0e5dd2', id: "fallback-logo-lmvz", icon: "Logo", size: "inherit", "aria-label": "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '1d5cc9010ef90e6cebc8a7b054db595f35f9e040', "aria-label": "Hauptnavigation" }, h("div", { key: '488a1b1544242562b57d76169f1988d84c611de4', role: "menubar", class: "primary-menubar" }, h("slot", { key: '59c6dd1442290931ed9a55f7bacc65ea4bb9ff6d', name: "nav-primary", ref: el => (this.primarySlot = el) }), h("separator", { key: '2729f0e8b115614c50c4a16b6684a3bdb21856b8' }), h("div", { key: '6b5bed5951bad9173fefdc78039e71c4ccc120b2', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: el => (this.secondaryNav = el) }, h("slot", { key: '02f5a13e8851372c1698e3f786a8757a0a09c32f', name: this.secondarySlotName, ref: el => (this.secondarySlot = el) })))), h("div", { key: '53aafe8139bcea27d3039f64a48974cdb5aac5f9', class: "actions" }, h("slot", { key: 'f12ee19831073253e6ba8e251ba31ec403c21035', 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",
                    "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"
            }];
    }
}
