import { h } from "@stencil/core";
import { NavLinkItem } from "./bal-nav-link-item";
import { NavSectionLinkItem } from "./bal-nav-section-link-item";
import { NavServiceLinkItem } from "./bal-nav-service-link-item";
import { AccordionButton } from "../components/accordion-button";
import { OverviewLink } from "../components/overview-link";
import { BEM } from "../../../utils/bem";
export class NavMenuLinkItem extends NavLinkItem {
    constructor(item, observer) {
        super(item, observer);
        this.sectionLinkItems = [];
        this.serviceLinkItems = [];
        this.id = `nav-menu-link-item-${NavMenuLinkItemIDs++}`;
        this.value = item.value || this.id;
        this.sectionLinkItems = (item.sectionLinkItems || []).map(item => new NavSectionLinkItem(item, observer));
        this.serviceLinkItems = (item.serviceLinkItems || []).map(item => new NavServiceLinkItem(item, observer));
        this.overviewLink = item.overviewLink ? new NavLinkItem(item.overviewLink, observer) : undefined;
    }
    get type() {
        return 'NavMenuLinkItem';
    }
    renderTouch(context) {
        const block = BEM.block('nav');
        const hasSectionLinkItems = this.sectionLinkItems && this.sectionLinkItems.length > 0;
        const hasServiceLinkItems = this.serviceLinkItems && this.serviceLinkItems.length > 0;
        const isSelected = (context === null || context === void 0 ? void 0 : context.activeMenuLinkValue) === this.value;
        return (h("li", null, h(AccordionButton, { id: this.id, level: "menu", label: this.label, href: this.href, target: this.target, link: this.isLink, open: isSelected, onClick: ev => this.onAccordionClick(ev) }), isSelected ? (h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev), isMenu: true })) : (''), isSelected && hasSectionLinkItems ? (h("ul", { class: Object.assign({}, block.element('mobile-section-list').class()) }, this.sectionLinkItems.map(item => item.renderTouch()))) : (''), isSelected && hasServiceLinkItems ? (h("ul", { class: Object.assign({}, block.element('mobile-service-list').class()) }, this.serviceLinkItems.map(item => item.renderTouch()))) : ('')));
    }
    render(context) {
        if (this.isLink) {
            return h("bal-tab-item", { label: this.label, value: this.value, href: this.href, target: this.target });
        }
        return (h("bal-tab-item", { label: this.label, value: this.value, onBalNavigate: ev => {
                context === null || context === void 0 ? void 0 : context.onClick();
                if (this.onClick) {
                    this.onClick(ev.detail);
                }
            } }));
    }
}
let NavMenuLinkItemIDs = 0;
