/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { Component, Host, h, Prop, State, Listen, Event } from '@stencil/core';
import { menuSharp } from 'ionicons/icons';
import { createColorClasses } from '../../utils/theme';
const logo = 'https://camo.githubusercontent.com/2bac56fff4f1d85f15664302b857a26d039d467660d9f34f73d9a19436ad8b4a/68747470733a2f2f676173636f2d7765622d636f6d706f6e656e742e6865726f6b756170702e636f6d2f696d672f676173636f2d7765622d636f6d706f6e656e742e737667';
export class GascoNavbar {
  constructor() {
    // STATE
    this.isResponsive = document.documentElement.clientWidth;
    this.isOpen = false;
    // PROPS
    this.position = 'relative';
    this.color = 'primary';
  }
  handleResize() {
    this.isResponsive = document.documentElement.clientWidth;
  }
  componentWillRender() {
    this.gascoSetUserToSidebar.emit({ user: this.user, userNav: this.usernav });
  }
  render() {
    const { user, position } = this;
    return (h(Host, { class: createColorClasses(this.color, {
        'gasco-navbar': true,
        'gasco-activatable': true,
        [`gasco-position-${position}`]: true,
      }) },
      h("header", { class: "header-native", part: "native" },
        this.isResponsive <= 480 && (h("button", { onClick: () => this.gascoSidebarShow.emit(true) },
          h("ion-icon", { icon: menuSharp, lazy: false, flipRtl: true }))),
        h("img", { src: logo, alt: "logo" }),
        this.isResponsive >= 480 && (h("div", { class: "header-nav" },
          h("slot", { name: "nav" }),
          user !== undefined && (h("button", { class: "header-button", onFocus: () => this.isOpen = true, onBlur: () => setTimeout(() => this.isOpen = 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))))))),
        this.isOpen && (h("gasco-list", null, this.usernav.map((nav) => (h("gasco-item", { href: nav.link }, nav.name))))))));
  }
  static get is() { return "gasco-navbar"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["gasco-navbar.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gasco-navbar.css"]
  }; }
  static get properties() { return {
    "position": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'relative' | 'sticky'",
        "resolved": "\"relative\" | \"sticky\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "position",
      "reflect": false,
      "defaultValue": "'relative'"
    },
    "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": ""
      },
      "attribute": "color",
      "reflect": true,
      "defaultValue": "'primary'"
    },
    "user": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "INavbarUser",
        "resolved": "INavbarUser",
        "references": {
          "INavbarUser": {
            "location": "import",
            "path": "../../interface"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "usernav": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "INavbarUserNav[]",
        "resolved": "INavbarUserNav[]",
        "references": {
          "INavbarUserNav": {
            "location": "import",
            "path": "../../interface"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "isResponsive": {},
    "isOpen": {}
  }; }
  static get events() { return [{
      "method": "gascoSidebarShow",
      "name": "gascoSidebarShow",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "gascoSetUserToSidebar",
      "name": "gascoSetUserToSidebar",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "IGetUserOfNavbar",
        "resolved": "IGetUserOfNavbar",
        "references": {
          "IGetUserOfNavbar": {
            "location": "import",
            "path": "../../interface"
          }
        }
      }
    }]; }
  static get listeners() { return [{
      "name": "resize",
      "method": "handleResize",
      "target": "window",
      "capture": false,
      "passive": true
    }]; }
}
