/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { Component, Host, h, Prop, Watch, State, Listen } from '@stencil/core';
import { chevronBackOutline, chevronDownOutline, chevronForwardOutline } from 'ionicons/icons';
import { createColorClasses } from '../../utils/theme';
export class GascoSidebar {
  constructor() {
    this.isResize = false;
    this.isOpenMenu = false;
    this.isOpenNavbar = false;
    this.isResponsive = document.documentElement.clientWidth;
    /**
     * If 'true', the `gasco-sidebar` will be inicialized open, defaul is `false`.
     */
    this.isOpen = false;
    /**
     * If `cover`, the `gasco-sidebar` will expand to cover the full height of its container.
     * If `fixed`, the `gasco-sidebar` will have a fixed height.
     */
    this.size = 'fixed';
    /**
     * The color to use from your application's color palette.
     * Default options are: `"primary"`, `"secondary"`, `"success"`, `"warning"`, `"danger"`.
     */
    this.color = 'primary';
    // METHOD's
    this.handleHiddenSidebar = () => {
      if (this.isResponsive <= 480) {
        this.isResize = false;
        setTimeout(() => {
          this.isOpenNavbar = false;
          this.handleBackdrop();
        }, 120);
      }
      else {
        this.isResize = !this.isResize;
        this.isOpenNavbar = !this.isOpenNavbar;
      }
    };
  }
  // EVENT's
  handleResize() {
    this.isResponsive = document.documentElement.clientWidth;
  }
  handleShowUser(e) {
    this.user = e.detail.user;
    this.usernav = e.detail.userNav;
  }
  handleBackdrop() {
    this.isResize = false;
    setTimeout(() => {
      this.isOpenNavbar = false;
      document.body.childNodes.forEach((node) => {
        if (node.nodeName === 'GASCO-BACKDROP') {
          node.remove();
        }
      });
    }, 120);
  }
  handleSidebarShow(e) {
    this.isOpenNavbar = e.detail;
    this.isResize = true;
    const backdropEl = document.createElement('gasco-backdrop');
    backdropEl.visible = true;
    document.body.appendChild(backdropEl);
  }
  handleGascoChange(e) {
    const item = e.target;
    if (item.tagName === "GASCO-ITEM") {
      if (item.style.height === 'auto') {
        item.style.height = '48px';
        item.children.item(2).replaceWith(this.createNewIcon(chevronForwardOutline, 'end'));
      }
      else {
        item.style.height = 'auto';
        item.children.item(2).replaceWith(this.createNewIcon(chevronDownOutline, 'end'));
      }
    }
    e.stopPropagation();
  }
  // Item  Watch 
  handleIsResize(current) {
    const subItem = document.querySelectorAll('gasco-list-header');
    const item = document.querySelectorAll('gasco-item');
    if (current) {
      item === null || item === void 0 ? void 0 : item.forEach(node => {
        if (!node.href) {
          node.style.height = '48px';
          node.children.item(2).replaceWith(this.createNewIcon(chevronForwardOutline, 'end'));
        }
      });
      if (this.isResponsive >= 480) {
        subItem === null || subItem === void 0 ? void 0 : subItem.forEach((el, index) => {
          el.style.transition = '300ms';
          el.style.opacity = '0';
          el.style.paddingBottom = '0';
          el.style.transform = 'translate(-100px) scale(0)';
          if (index > 0) {
            setTimeout(() => el.style.display = 'none', 300);
          }
        });
      }
    }
    else {
      subItem === null || subItem === void 0 ? void 0 : subItem.forEach(el => {
        el.style.display = 'flex';
        el.style.opacity = '1';
        el.style.paddingBottom = '12px';
        el.style.transform = 'translate(0px) scale(1)';
      });
    }
  }
  createNewIcon(icon, slot) {
    const iconEl = document.createElement('ion-icon');
    iconEl.slot = slot;
    iconEl.lazy = false;
    iconEl.icon = icon;
    iconEl.classList.add('gasco-sidebar-toggle-icon');
    iconEl.setAttribute('aria-hidden', 'true');
    return iconEl;
  }
  componentWillLoad() {
    const subItem = document.querySelectorAll('gasco-item');
    subItem.forEach(node => {
      if (!node.href) {
        node.style.transition = 'height 300ms';
        node.style.willChange = 'height';
        node.style.height = '48px';
        node.appendChild(this.createNewIcon(chevronForwardOutline, 'end'));
      }
    });
  }
  render() {
    const { user, handleHiddenSidebar } = this;
    return (h(Host, { class: createColorClasses(this.color, {
        'gasco-activatable': true,
        [`sidebar-size-${this.size}`]: true,
        'sidebar-show': this.isOpenNavbar,
        'sidebar-with-user': user !== null,
      }) },
      h("div", { class: "sidebar-native", part: "native" },
        h("button", { class: `sidebar-button${this.isResize ? ' is-resize' : ''}`, onClick: handleHiddenSidebar },
          h("ion-icon", { icon: chevronBackOutline })),
        this.isResponsive <= 480 && user !== null && (h("button", { class: "sidebar-user-button", onFocus: () => this.isOpenMenu = true, onBlur: () => setTimeout(() => this.isOpenMenu = false, 120) },
          h("figure", { class: "wrap-avatar" },
            h("img", { src: user === null || user === void 0 ? void 0 : user.avatar, alt: user === null || user === void 0 ? void 0 : user.name }),
            h("figcaption", null,
              h("h3", null, user === null || user === void 0 ? void 0 : user.name),
              h("p", null, user === null || user === void 0 ? void 0 : user.role))))),
        h("slot", { name: "user-nav" }),
        this.isOpenMenu && (h("gasco-list", { class: "menu-user" }, this.usernav.map((nav) => (h("gasco-item", { href: nav.link }, nav.name))))),
        h("slot", null))));
  }
  static get is() { return "gasco-sidebar"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["gasco-sidebar.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gasco-sidebar.css"]
  }; }
  static get properties() { return {
    "isOpen": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "If 'true', the `gasco-sidebar` will be inicialized open, defaul is `false`."
      },
      "attribute": "is-open",
      "reflect": false,
      "defaultValue": "false"
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'cover' | 'fixed'",
        "resolved": "\"cover\" | \"fixed\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "If `cover`, the `gasco-sidebar` will expand to cover the full height of its container.\r\nIf `fixed`, the `gasco-sidebar` will have a fixed height."
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "'fixed'"
    },
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Color",
        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never>",
        "references": {
          "Color": {
            "location": "import",
            "path": "../../interface"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The color to use from your application's color palette.\r\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`."
      },
      "attribute": "color",
      "reflect": true,
      "defaultValue": "'primary'"
    }
  }; }
  static get states() { return {
    "user": {},
    "isResize": {},
    "isOpenMenu": {},
    "isOpenNavbar": {},
    "isResponsive": {}
  }; }
  static get watchers() { return [{
      "propName": "isResize",
      "methodName": "handleIsResize"
    }]; }
  static get listeners() { return [{
      "name": "resize",
      "method": "handleResize",
      "target": "window",
      "capture": false,
      "passive": true
    }, {
      "name": "gascoSetUserToSidebar",
      "method": "handleShowUser",
      "target": "body",
      "capture": false,
      "passive": false
    }, {
      "name": "gascoBackdropTap",
      "method": "handleBackdrop",
      "target": "body",
      "capture": false,
      "passive": false
    }, {
      "name": "gascoSidebarShow",
      "method": "handleSidebarShow",
      "target": "body",
      "capture": false,
      "passive": false
    }, {
      "name": "click",
      "method": "handleGascoChange",
      "target": "body",
      "capture": false,
      "passive": true
    }]; }
}
