import { Component, Host, h, Event, Method, Element, Prop } from '@stencil/core';
export class UxplLeftNav {
  constructor() {
    this.navBarSelectors = {
      navBarClass: "tc-left-nav",
      navlinkClass: "tc-left-link",
      navItemClass: "tc-left-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);
  }
  async clearTabs() {
    this.activeItem = {};
    this.render();
  }
  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() {
    if (this.tabs) {
      return (h(Host, null,
        h("div", { class: "tc-left-nav" },
          h("div", { class: "tc-trigger-wrapper" },
            h("div", { class: "tc-trigger" }),
            h("span", { class: "tc-title" })),
          h("div", { class: "tc-navbar-background" }),
          h("nav", { class: "tc-left-navbar" },
            h("div", { class: "tc-close-icon" }),
            h("div", { class: "tc-content" },
              h("ul", { class: "tc-menu" }, this.tabs.map((leftMenu) => h("li", { class: "tc-menu-item", id: leftMenu.id, onClick: (e) => this.setActiveTab(e.currentTarget, leftMenu) },
                h("a", { class: "tc-menu-link" },
                  h("span", { class: "tc-menu-icon development-menu-item" }),
                  h("span", null, leftMenu.label),
                  " "))))),
            h("div", { class: "tc-collapse-icon-wrapper" })))));
    }
    else {
      return (h(Host, null,
        h("div", null)));
    }
  }
  static get is() { return "uxpl-left-nav"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-left-nav.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-left-nav.css"]
  }; }
  static get properties() { return {
    "tabs": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "LeftNav[]",
        "resolved": "LeftNav[]",
        "references": {
          "LeftNav": {
            "location": "import",
            "path": "../../models/leftNav"
          }
        }
      },
      "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
    },
    "width": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "width",
      "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": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  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": []
      }
    },
    "clearTabs": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
