import { h, Host } from "@stencil/core";
import { ElementIDUtils } from "@sankhyalabs/core";
import { EzScrollDirection } from "../ez-scroller/EzScrollDirection";
import { ModeMenuEnum, SizeMenuEnum, TypeMenuEnum } from "./interfaces";
import initI18n from '../../utils/i18n';
export class EzSidebarNavigator {
  constructor() {
    this.handleToggleSidebar = () => {
      this.open = !this.open;
    };
    this.handleToggleMode = () => {
      this.mode = this.mode === ModeMenuEnum.FIXED ? ModeMenuEnum.FLOAT : ModeMenuEnum.FIXED;
      this.ezChangeMode.emit(this.mode);
    };
    this.type = TypeMenuEnum.DYNAMIC;
    this.mode = ModeMenuEnum.FLOAT;
    this.size = SizeMenuEnum.SMALL;
    this.isResponsive = false;
    this.titleMenu = "";
    this.showCollapseMenu = true;
    this.showFixedButton = true;
    this.open = false;
  }
  /**
  * Método para fixar/desafixar o menu, emitindo o evento ezChangeMode.
  */
  async changeModeMenu() {
    if (this.type === TypeMenuEnum.DYNAMIC) {
      this.handleToggleMode();
    }
  }
  /**
  * Método para fechar o menu automaticamente após uma ação, fluxo, etc.
  */
  async closeSidebar() {
    this.open = false;
  }
  /**
  * Método para abrir o menu automaticamente após uma ação, fluxo, etc.
  */
  async openSidebar() {
    this.open = true;
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  componentDidLoad() {
    if (this.type === TypeMenuEnum.FIXED) {
      this.mode = ModeMenuEnum.FIXED;
      this.open = true;
    }
  }
  render() {
    ElementIDUtils.addIDInfoIfNotExists(this._element);
    return (h(Host, null, h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.mode === ModeMenuEnum.FIXED ? this.handleToggleSidebar : undefined, onMouseEnter: this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined, "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }), this.open ? (h("aside", { tabIndex: -1, id: "navigator", class: `ez-col ez-col--sd-12 ez-col--tb-3 ez-sidebar-navigator ${this.mode === ModeMenuEnum.FLOAT ? 'dynamic' : 'fixed'} ${this.isResponsive ? 'responsive' : this.size} ${!this.open ? "hidden" : "show"}`, "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar"), onMouseLeave: this.type !== TypeMenuEnum.FIXED && this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined }, h("header", { class: "ez-sidebar-navigator__header" }, h("slot", { name: "start" }), this.titleMenu !== '' && (h("div", { class: "ez-sidebar-navigator__title", title: this.titleMenu }, this.titleMenu)), !this.titleMenu && (h("slot", { name: "content" })), h("div", { class: "ez-sidebar-navigator__end" }, h("slot", { name: "end" }), (this.type === TypeMenuEnum.DYNAMIC && this.showFixedButton) && (h("ez-button", { onClick: this.handleToggleMode, mode: "icon", size: "small", iconName: this.mode === ModeMenuEnum.FIXED ? "un-pin" : "push-pin", title: this.mode === ModeMenuEnum.FIXED ? this.i18n("ez-sidebar.unPinMenu") : this.i18n("ez-sidebar.pushPinMenu"), "aria-label": this.mode === ModeMenuEnum.FIXED ? this.i18n("ez-sidebar.unPinMenu") : this.i18n("ez-sidebar.pushPinMenu"), "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("pinButton") })), (this.mode === ModeMenuEnum.FIXED && this.showCollapseMenu) && (h("ez-button", { onClick: this.handleToggleSidebar, class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: this.i18n("ez-sidebar.hideMenu"), "aria-label": this.i18n("ez-sidebar.hideMenu"), "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })))), this.titleMenu && (h("slot", { name: "content" })), h("ez-scroller", { class: "ez-sidebar-navigator__content", direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("slot", null)), h("footer", { class: "ez-sidebar-navigator__footer" }, h("slot", { name: "footer" }))))
      : undefined));
  }
  static get is() { return "ez-sidebar-navigator"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-sidebar-navigator.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-sidebar-navigator.css"]
    };
  }
  static get properties() {
    return {
      "type": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "TypeMenuEnum",
          "resolved": "TypeMenuEnum.DYNAMIC | TypeMenuEnum.FIXED | TypeMenuEnum.FLOAT",
          "references": {
            "TypeMenuEnum": {
              "location": "import",
              "path": "./interfaces"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o tipo do menu (float, fixed ou dynamic (livre))."
        },
        "attribute": "type",
        "reflect": false,
        "defaultValue": "TypeMenuEnum.DYNAMIC"
      },
      "mode": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "ModeMenuEnum",
          "resolved": "ModeMenuEnum.FIXED | ModeMenuEnum.FLOAT",
          "references": {
            "ModeMenuEnum": {
              "location": "import",
              "path": "./interfaces"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se o menu ser\u00E1 do tipo FIXED ou FLOAT."
        },
        "attribute": "mode",
        "reflect": false,
        "defaultValue": "ModeMenuEnum.FLOAT"
      },
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "SizeMenuEnum",
          "resolved": "SizeMenuEnum.LARGE | SizeMenuEnum.MEDIUM | SizeMenuEnum.SMALL",
          "references": {
            "SizeMenuEnum": {
              "location": "import",
              "path": "./interfaces"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o tamanho do menu (small, medium, large)."
        },
        "attribute": "size",
        "reflect": false,
        "defaultValue": "SizeMenuEnum.SMALL"
      },
      "isResponsive": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se ter\u00E1 responsividade, Controle dever\u00E1 ser pelo CSS."
        },
        "attribute": "is-responsive",
        "reflect": false,
        "defaultValue": "false"
      },
      "titleMenu": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o t\u00EDtulo do Sidebar Navigator"
        },
        "attribute": "title-menu",
        "reflect": false,
        "defaultValue": "\"\""
      },
      "showCollapseMenu": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se o bot\u00E3o de \"Recolher Menu\" ser\u00E1 exibido"
        },
        "attribute": "show-collapse-menu",
        "reflect": false,
        "defaultValue": "true"
      },
      "showFixedButton": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se o bot\u00E3o de \"Fixar Menu\" ser\u00E1 exibido"
        },
        "attribute": "show-fixed-button",
        "reflect": false,
        "defaultValue": "true"
      }
    };
  }
  static get states() {
    return {
      "open": {}
    };
  }
  static get events() {
    return [{
        "method": "ezChangeMode",
        "name": "ezChangeMode",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Evento emitido sempre que o modo (FLOAT ou FIXED) do menu for alterado.."
        },
        "complexType": {
          "original": "ModeMenuEnum",
          "resolved": "ModeMenuEnum.FIXED | ModeMenuEnum.FLOAT",
          "references": {
            "ModeMenuEnum": {
              "location": "import",
              "path": "./interfaces"
            }
          }
        }
      }];
  }
  static get methods() {
    return {
      "changeModeMenu": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "M\u00E9todo para fixar/desafixar o menu, emitindo o evento ezChangeMode.",
          "tags": []
        }
      },
      "closeSidebar": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "M\u00E9todo para fechar o menu automaticamente ap\u00F3s uma a\u00E7\u00E3o, fluxo, etc.",
          "tags": []
        }
      },
      "openSidebar": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "M\u00E9todo para abrir o menu automaticamente ap\u00F3s uma a\u00E7\u00E3o, fluxo, etc.",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "_element"; }
}
