import { h, Host } from "@stencil/core";
import { KeyboardManager } from "@sankhyalabs/core";
import ModalAction from "./modal-action";
import ModalButtonStatus from "./modal-button-status";
import initI18n from '../../utils/i18n';
export class EzModalContainer {
  constructor() {
    this.modalTitle = undefined;
    this.modalSubTitle = undefined;
    this.showTitleBar = true;
    this.cancelButtonLabel = undefined;
    this.okButtonLabel = undefined;
    this.cancelButtonStatus = undefined;
    this.okButtonStatus = undefined;
    this.showCloseButton = true;
    this.autoFocus = false;
  }
  async handleEzModalAction(event) {
    var _a;
    if ((event === null || event === void 0 ? void 0 : event.target) && (event === null || event === void 0 ? void 0 : event.target) === ((_a = this._element) === null || _a === void 0 ? void 0 : _a.parentElement)) {
      this.closeModal();
    }
  }
  cancelIsVisible() {
    return (this.cancelButtonStatus !== ModalButtonStatus.HIDDEN && this.cancelButtonLabel != undefined);
  }
  okIsVisible() {
    return (this.okButtonStatus !== ModalButtonStatus.HIDDEN && this.okButtonLabel != undefined);
  }
  emitOkAction() {
    this.ezModalAction.emit(ModalAction.OK);
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  connectedCallback() {
    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element })
      .bind("Enter", () => this.emitOkAction())
      .bind("Escape", () => this.closeModal())
      .bind("Esc", () => this.closeModal());
  }
  componentDidLoad() {
    window.requestAnimationFrame(() => {
      this.ezModalAction.emit(ModalAction.LOAD);
      if (this.autoFocus) {
        this._modalRef.focus();
      }
    });
  }
  disconnectedCallback() {
    var _a;
    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
  }
  closeModal() {
    this.ezModalAction.emit("CLOSE");
  }
  render() {
    return (h(Host, null, h("header", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE), "aria-label": this.i18n("app.close") }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("main", { tabIndex: -1, class: "ez-modal-container__content" }, h("slot", null)), h("footer", { tabIndex: -1, class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel || this.i18n("app.cancel"), isDisabled: this.cancelButtonStatus === ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel || this.i18n("app.ok"), isDisabled: this.okButtonStatus === ModalButtonStatus.DISABLED, onClick: () => this.emitOkAction() })))));
  }
  static get is() { return "ez-modal-container"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() {
    return {
      "$": ["./ez-modal-container.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-modal-container.css"]
    };
  }
  static get properties() {
    return {
      "modalTitle": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Texto a ser apresentado como t\u00EDtulo do modal."
        },
        "attribute": "modal-title",
        "reflect": false
      },
      "modalSubTitle": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Texto do subt\u00EDtulo, geralmente usado para orienta\u00E7\u00E3o do usu\u00E1rio."
        },
        "attribute": "modal-sub-title",
        "reflect": false
      },
      "showTitleBar": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se o cabe\u00E7alho ser\u00E1 mostrado."
        },
        "attribute": "show-title-bar",
        "reflect": false,
        "defaultValue": "true"
      },
      "cancelButtonLabel": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o texto do bot\u00E3o de cancelamento."
        },
        "attribute": "cancel-button-label",
        "reflect": false
      },
      "okButtonLabel": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Determina o texto do bot\u00E3o de confirma\u00E7\u00E3o."
        },
        "attribute": "ok-button-label",
        "reflect": false
      },
      "cancelButtonStatus": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"HIDDEN\"|\"ENABLED\"|\"DISABLED\"",
          "resolved": "\"DISABLED\" | \"ENABLED\" | \"HIDDEN\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o estado do bot\u00E3o de cancelamento."
        },
        "attribute": "cancel-button-status",
        "reflect": false
      },
      "okButtonStatus": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"HIDDEN\"|\"ENABLED\"|\"DISABLED\"",
          "resolved": "\"DISABLED\" | \"ENABLED\" | \"HIDDEN\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o estado do bot\u00E3o de confirma\u00E7\u00E3o."
        },
        "attribute": "ok-button-status",
        "reflect": false
      },
      "showCloseButton": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define a visibilidade do bot\u00E3o de fechar."
        },
        "attribute": "show-close-button",
        "reflect": false,
        "defaultValue": "true"
      },
      "autoFocus": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Se true o modal container receber\u00E1 o foco ao ser renderizado."
        },
        "attribute": "auto-focus",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get events() {
    return [{
        "method": "ezModalAction",
        "name": "ezModalAction",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Representa a intera\u00E7\u00E3o com o usu\u00E1rio.\nOK - Quando o bot\u00E3o \u00E9 acionado\nCANCEL - Quando o bot\u00E3o de cancelar \u00E9 acionado\nCLOSE - Quando o bot\u00E3o de fechar \u00E9 acionado.\nLOAD - Quando o modal \u00E9 carregado (eventualmente pode ser usado para dar foco a um elemento espec\u00EDfico)"
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "_element"; }
  static get listeners() {
    return [{
        "name": "ezCloseModal",
        "method": "handleEzModalAction",
        "target": "document",
        "capture": false,
        "passive": false
      }];
  }
}
