import { Component, Event, h, Method, Prop, Element } from '@stencil/core';
export class UxplPrimaryNav {
  constructor() {
    this.navBarSelectors = {
      navBarClass: "tc-navbar-nav",
      navlinkClass: "tc-nav-link",
      navItemClass: "tc-nav-item",
      activeClass: "tc-active"
    };
    this.setActiveTab = (e, navTab, silence) => {
      if (this.activeItem) {
        this.activeItem.classList.toggle(this.navBarSelectors.activeClass);
      }
      this.activeItem = e;
      this.activeItem.classList.toggle(this.navBarSelectors.activeClass);
      if (!silence) {
        this.selected.emit(navTab);
      }
    };
  }
  async setTab(navTab, silence) {
    return this.setTabApi(navTab, silence);
  }
  componentWillLoad() {
    this.children = Array.from(this.el.children);
    this.el.innerHTML = '';
  }
  componentDidLoad() {
  }
  setTabApi(navTab, silence) {
    //const nav = document.getElementById('tab1');
    const nav = this.el.shadowRoot.getElementById(navTab.id);
    if (nav) {
      this.setActiveTab(nav, navTab, silence);
    }
  }
  render() {
    // console.log(this.center);
    return (h("div", null,
      h("nav", { class: "tc-navbar" },
        h("a", { class: "tc-navbar-brand tc-hide", href: "#" }, "Tibco"),
        h("ul", { class: {
            'tc-navbar-nav': true,
            'tc-navbar-list-container': true,
            'center': this.center
          } },
          this.tabs.map((navTab) => h("li", { class: "tc-nav-item", id: navTab.id, onClick: (e) => this.setActiveTab(e.currentTarget, navTab) },
            h("a", { class: "tc-nav-link" },
              h("span", { class: "tc-nav-icon development-nav-item" }),
              h("span", null, navTab.label),
              " "))),
          this.children.map(child => h("li", { class: "tc-nav-item", id: child.id, onClick: (e) => this.setActiveTab(e.currentTarget, { id: child.id, label: child.attributes.label }) },
            h("a", { class: "tc-nav-link" },
              h("span", { class: "tc-nav-icon development-nav-item" }),
              h("li", { innerHTML: child.outerHTML }))))))));
  }
  static get is() { return "uxpl-primary-nav"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-primary-nav.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-primary-nav.css"]
  }; }
  static get properties() { return {
    "tabs": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "NavTab[]",
        "resolved": "NavTab[]",
        "references": {
          "NavTab": {
            "location": "import",
            "path": "../../models/navTab"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Required Tabs"
      }
    },
    "center": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Center content"
      },
      "attribute": "center",
      "reflect": false
    }
  }; }
  static get events() { return [{
      "method": "selected",
      "name": "selected",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Event that tab was selected"
      },
      "complexType": {
        "original": "NavTab",
        "resolved": "NavTab",
        "references": {
          "NavTab": {
            "location": "import",
            "path": "../../models/navTab"
          }
        }
      }
    }]; }
  static get methods() { return {
    "setTab": {
      "complexType": {
        "signature": "(navTab: any, silence?: boolean) => Promise<void>",
        "parameters": [{
            "tags": [],
            "text": ""
          }, {
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
