import { h } from "@stencil/core";
import { BEM } from "../../../utils/bem";
export class NavLinkItem {
  constructor(item, observer) {
    this.observer = observer;
    this.clickable = false;
    this.active = false;
    this.data = undefined;
    this.label = item.label;
    this.id = `nav-link-item-${NavLinkItemIDs++}`;
    this.value = item.value || this.id;
    this.href = item.href;
    this.target = item.target;
    this.active = !!item.active;
    this.clickable = !!item.clickable;
    this.data = item.data;
    this.onClick = (ev) => {
      this.observer.linkItemClickListener(this);
      if (item.onClick) {
        item.onClick(ev);
      }
    };
    this.onAccordionClick = (ev) => {
      this.observer.accordionClickListener(this);
      if (item.onAccordionClick) {
        item.onAccordionClick(ev);
      }
    };
  }
  get type() {
    return 'NavLinkItem';
  }
  get isLink() {
    return this.href !== undefined && this.href !== null && this.href !== '';
  }
  toJson() {
    return {
      label: this.label,
      value: this.value,
      href: this.href,
      target: this.target,
      data: this.data,
    };
  }
  renderTouch(_context) {
    const block = BEM.block('nav');
    return (h("li", null, h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-links').class()), block.element('mobile-links').modifier('selected').class(this.active)), block.element('mobile-links').modifier('clickable').class(this.clickable)), href: this.href, target: this.target, onClick: ev => this.onClick(ev) }, this.label)));
  }
  render(_context) {
    return (h("bal-nav-link", { role: "listitem", href: this.href, target: this.target, clickable: this.clickable, selected: this.active, onClick: ev => this.onClick(ev) }, this.label));
  }
}
let NavLinkItemIDs = 0;
