import { h } from "@stencil/core";
import { BEM } from "../../../utils/bem";
import { NavLinkItem } from "./bal-nav-link-item";
export class NavSectionLinkItem extends NavLinkItem {
    constructor(item, observer) {
        super(item, observer);
        this.linkItems = [];
        this.htmlTitle = item.htmlTitle;
        this.label = item.label;
        this.href = item.href;
        this.target = item.target;
        this.id = `nav-section-link-item-${NavSectionLinkItemIDs++}`;
        this.value = item.value || this.id;
        this.linkItems = (item.linkItems || []).map(item => new NavLinkItem(item, observer));
    }
    get type() {
        return 'NavSectionLinkItem';
    }
    renderTouch(_context) {
        const block = BEM.block('nav');
        const hasItems = this.linkItems && this.linkItems.length > 0;
        return (h("li", null, h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-section-item').class()), block.element('mobile-section-item').modifier('selected').class(this.active)), block.element('mobile-section-item').modifier('clickable').class(this.clickable)), href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label), hasItems ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
    }
    render(_context) {
        return (h("bal-nav-link-group", { role: "list" }, h("bal-nav-link", { role: "listitem", variant: "title", href: this.href, target: this.target, selected: this.active, onClick: ev => this.onClick(ev) }, this.label), this.linkItems.map(item => item.render())));
    }
}
let NavSectionLinkItemIDs = 0;
