import { Component, Host, h, Prop, Event, Method, Element } from '@stencil/core';
export class UxplLeftNavMulti {
  /**
   * Method to set the active Tab
   */
  async setTab(navTab, silence) {
    return this.setTabApi(navTab, silence);
  }
  removeSelection() {
    const els = this.navElement.querySelectorAll('.is-active');
    els.forEach(element => {
      element.classList.remove('is-active');
      element.classList.remove('is-open');
    });
  }
  setTabApi(navTab, silence) {
    if (navTab) {
      // remove any existing selection first
      this.removeSelection();
      const nav = this.el.shadowRoot.getElementById(navTab.id);
      if (nav) {
        nav.classList.add('is-active');
        // console.log(typeof navTab);
        if (navTab.child && navTab.child.length > 0) {
          nav.classList.add('is-open');
        }
        else if (nav.parentElement
          && nav.parentElement.parentElement
          && nav.parentElement.parentElement.parentElement
          && nav.parentElement.parentElement.parentElement.classList.contains('pl-leftnav-menu__item')) {
          nav.parentElement.parentElement.parentElement.classList.add('is-active');
          nav.parentElement.parentElement.parentElement.classList.add('is-open');
        }
        ;
        if (!silence) {
          this.selected.emit(navTab);
        }
      }
    }
  }
  componentDidLoad() {
    /*this.leftNav = LeftNav.createWithLayout(
      this.navElement
    );*/
  }
  menuToggle(e, menuItem) {
    // OOTB menu does NOT close menu on click
    e.stopPropagation();
    if (e.currentTarget.classList.contains('is-open')) {
      e.currentTarget.classList.remove('is-open');
    }
    else {
      // remove is-active and is-open from any other parent and child menus
      Array.from(e.currentTarget.parentElement.children).map((child) => {
        child['classList'].remove('is-active');
        child['classList'].remove('is-open');
        // toggle any sub-menus active
        child.querySelectorAll('li.is-active').forEach(subMenu => {
          subMenu.classList.remove('is-active');
        });
      });
      const els = e.currentTarget.parentElement.querySelectorAll('.is-active');
      els.forEach(element => {
        element.classList.remove('is-active');
        element.classList.remove('is-open');
      });
      e.currentTarget.classList.add('is-active');
      e.currentTarget.classList.add('is-open');
    }
    this.selected.emit(menuItem);
  }
  collapseToggle() {
    if (this.navElement.classList.contains('is-collapsed')) {
      this.navElement.classList.remove('is-collapsed');
      this.collapsed.emit(false);
    }
    else {
      this.navElement.classList.add('is-collapsed');
      this.collapsed.emit(true);
    }
  }
  itemToggle(e, menuItem) {
    e.stopPropagation();
    if (!e.currentTarget.classList.contains('is-active')) {
      // remove is-active from any other parent menus
      Array.from(e.currentTarget.parentElement.children).map((child) => {
        child['classList'].remove('is-active');
      });
      e.currentTarget.classList.add('is-active');
    }
    this.selected.emit(menuItem);
  }
  render() {
    if (this.tabs) {
      return (h(Host, null,
        h("div", { class: "pl-leftnav-layout", ref: (el) => this.navElement = el },
          h("nav", { class: "pl-leftnav pl-leftnav-layout__side", "data-pl-leftnav-role": "leftnav", style: {
              'width': this.width ? this.width.toString() : '228px',
            } },
            h("ul", { class: "pl-leftnav-menu pl-leftnav-layout__collapsible", "data-pl-leftnav-role": "menu" }, this.tabs.map((menuItem) => h("li", { id: menuItem.id, class: "pl-leftnav-menu__item", "data-pl-leftnav-role": "menu-item", onClick: (e) => this.menuToggle(e, menuItem) },
              h("div", { class: "pl-leftnav-menu__link no-margin pad-main", "data-pl-leftnav-role": "menu-item" },
                menuItem.icon ?
                  menuItem.icon.endsWith('.svg') ?
                    h("img", { class: "pl-leftnav-menu__icon", role: "img", "aria-hidden": "true", src: menuItem.icon })
                    :
                      h("uxpl-icon", { class: "pl-leftnav-menu__icon", height: "24px", width: "24px", icon: menuItem.icon })
                  /*<!--<img class="pl-leftnav-menu__icon" role="img" aria-hidden="true" src={menuItem.icon}/>-->*/
                  :
                    h("div", null),
                menuItem.label),
              (menuItem.child && menuItem.child.length > 0) ?
                h("div", null,
                  h("button", { class: "pl-leftnav-menu__dropdown", "data-pl-leftnav-role": "dropdown", type: "button", "aria-label": "toggle sub menu" },
                    h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentColor", viewBox: "0 0 24 24" },
                      h("path", { "fill-rule": "evenodd", d: "M6.031 9c-.884 0-1.357.996-.774 1.632L11.999 18l6.744-7.368c.584-.636.109-1.632-.775-1.632H6.031z" }))),
                  h("ul", { class: "pl-leftnav-menu__nested", "data-pl-leftnav-role": "nested-menu" }, menuItem.child.map((childItem) => h("li", { id: childItem.id, onClick: (e) => this.itemToggle(e, childItem), class: "pl-leftnav-menu__item", "data-pl-leftnav-role": "menu-item" },
                    h("a", { class: "pl-leftnav-menu__link", "data-pl-leftnav-role": "menu-link" },
                      childItem.icon ?
                        childItem.icon.endsWith('.svg') ?
                          h("img", { class: "pl-leftnav-menu__icon", role: "img", "aria-hidden": "true", src: menuItem.icon })
                          :
                            h("uxpl-icon", { class: "pl-leftnav-menu__icon", height: "24px", width: "24px", icon: childItem.icon })
                        :
                          h("div", null),
                      childItem.label)))))
                :
                  h("div", null)))),
            (this.collapse) ?
              h("button", { class: "pl-leftnav-layout__collapse", "data-pl-leftnav-role": "collapse", type: "button", onClick: _ => this.collapseToggle() },
                h("span", { class: "pl-leftnav-layout__collapse-text" }, "Collapse"),
                h("uxpl-icon", { class: "pl-leftnav-layout__collapse-icon", height: "24px", width: "24px", icon: "pl-icon-collapse-horizontal" })) : h("div", null)))));
    }
    else {
      return (h(Host, null,
        h("div", null)));
    }
  }
  static get is() { return "uxpl-left-nav-multi"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-left-nav-multi.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-left-nav-multi.css"]
  }; }
  static get properties() { return {
    "tabs": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "NavMenu[]",
        "resolved": "NavMenu[]",
        "references": {
          "NavMenu": {
            "location": "import",
            "path": "../../models/leftNav"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Required Tabs"
      }
    },
    "width": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Width override (pixels)"
      },
      "attribute": "width",
      "reflect": false
    },
    "collapse": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Property to say if this menu can collapse or not"
      },
      "attribute": "collapse",
      "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": {}
      }
    }, {
      "method": "collapsed",
      "name": "collapsed",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Event that menu is collapsed"
      },
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "setTab": {
      "complexType": {
        "signature": "(navTab: NavMenu, silence?: boolean) => Promise<void>",
        "parameters": [{
            "tags": [],
            "text": ""
          }, {
            "tags": [],
            "text": ""
          }],
        "references": {
          "Promise": {
            "location": "global"
          },
          "NavMenu": {
            "location": "import",
            "path": "../../models/leftNav"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Method to set the active Tab",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
}
