import { h } from "@stencil/core";
import { NavLinkItem } from "./bal-nav-link-item";
import { BEM } from "../../../utils/bem";
export class NavServiceLinkItem extends NavLinkItem {
  constructor(item, observer) {
    super(item, observer);
    this.color = 'grey';
    this.linkItems = [];
    this.id = `nav-service-link-item-${NavServiceLinkItemIDs++}`;
    this.value = item.value || this.id;
    this.color = item.color || 'grey';
    this.linkItems = (item.linkItems || []).map(item => new NavLinkItem(item, observer));
  }
  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-service-item').class()), block.element('mobile-service-item').modifier('selected').class(this.active)), block.element('mobile-service-item').modifier('clickable').class(this.clickable)), href: this.href, 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", { color: this.color, 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 NavServiceLinkItemIDs = 0;
