import { Host, h } from "@stencil/core";
import { FloatingManager, KeyboardManager } from '@sankhyalabs/core';
import initI18n from '../../utils/i18n';
export class EzModal {
  constructor() {
    this.modalSize = undefined;
    this.align = undefined;
    this.heightMode = "regular";
    this.opened = true;
    this.closeEsc = false;
    this.closeOutsideClick = false;
    this.closeOutsideLeave = false;
    this.scrim = "medium";
  }
  observeOpened() {
    if (this.opened) {
      this._overlayId = FloatingManager.subscribeOverlayControl(this._modalRef);
    }
    else {
      FloatingManager.unsubscribeOverlayControl(this._modalRef || this._overlayId);
    }
  }
  closeModal() {
    this.opened = false;
    this.ezCloseModal.emit(this.opened);
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  componentDidLoad() {
    this.observeOpened();
    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element, enableShadowDom: true })
      .bind("Enter", this.ezModalAction.emit.bind("OK"))
      .bind("Escape", () => this.closeModal())
      .bind("Esc", () => this.closeModal());
  }
  componentDidRender() {
    this.modalFocus();
  }
  disconnectedCallback() {
    var _a;
    (_a = this._keyboardManager) === null || _a === void 0 ? void 0 : _a.unbindAllShortcutKeys();
  }
  modalFocus() {
    if (!this.opened) {
      return;
    }
    requestAnimationFrame(() => {
      const slot = this._element.shadowRoot.querySelector("ez-modal-container");
      if (this._modalRef && slot === null) {
        this._modalRef.focus();
      }
    });
  }
  onMouseDownHandler(event) {
    if (this.closeOutsideClick && event.target === this._overlay) {
      this.closeModal();
    }
  }
  onMouseLeaveHandler() {
    if (this.closeOutsideLeave) {
      this.closeModal();
    }
  }
  render() {
    const positionSufix = this.align === "left" ? "left" : "right";
    const regularVerticalPaddingClass = this.heightMode === "regular" ? 'modal__vertical-padding' : '';
    const modalContentHeightMode = this.heightMode === "regular" ? `modal__content--${positionSufix}` : '';
    const scrimType = `modal__screen-${this.scrim}`;
    return (h(Host, null, this.opened
      ?
        h("div", { ref: ref => this._modalRef = ref, class: `modal ${scrimType} ${regularVerticalPaddingClass}`, onMouseDown: evt => this.onMouseDownHandler(evt), tabIndex: -1, "aria-label": this.i18n("ez-modal.close") }, h("div", { class: `modal__container modal__container--${positionSufix}`, ref: ref => this._overlay = ref }, h("div", { onMouseLeave: () => this.onMouseLeaveHandler(), class: `modal__content ${modalContentHeightMode} ${this.modalSize}` }, h("slot", null))))
      :
        undefined));
  }
  static get is() { return "ez-modal"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-modal.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-modal.css"]
    };
  }
  static get properties() {
    return {
      "modalSize": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o tamanho do ez-modal. Devem ser definidas seguindo grid-layout. Exemplo: `col-sd-3`."
        },
        "attribute": "modal-size",
        "reflect": false
      },
      "align": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"right\" | \"left\"",
          "resolved": "\"left\" | \"right\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o alinhamento do ez-modal."
        },
        "attribute": "align",
        "reflect": false
      },
      "heightMode": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "keyof THeightMode",
          "resolved": "\"full\" | \"regular\"",
          "references": {
            "THeightMode": {
              "location": "local"
            }
          }
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Ativa o modo Full, permitindo que o Modal expanda-se verticalmente e ocupe todo o espa\u00E7o dispon\u00EDvel."
        },
        "attribute": "height-mode",
        "reflect": false,
        "defaultValue": "\"regular\""
      },
      "opened": {
        "type": "boolean",
        "mutable": true,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se o ez-modal est\u00E1 aberto."
        },
        "attribute": "opened",
        "reflect": false,
        "defaultValue": "true"
      },
      "closeEsc": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se o ez-modal ser\u00E1 fechado ao clicar `ESC`."
        },
        "attribute": "close-esc",
        "reflect": false,
        "defaultValue": "false"
      },
      "closeOutsideClick": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se o modal ser\u00E1 fechado ao clicar fora do conte\u00FAdo."
        },
        "attribute": "close-outside-click",
        "reflect": false,
        "defaultValue": "false"
      },
      "closeOutsideLeave": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define se o modal ser\u00E1 fechado se o mouse sair para fora do conte\u00FAdo."
        },
        "attribute": "close-outside-leave",
        "reflect": false,
        "defaultValue": "false"
      },
      "scrim": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"medium\" | \"light\" | \"none\"",
          "resolved": "\"light\" | \"medium\" | \"none\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o tipo de scrim a ser aplicado no overlay do modal"
        },
        "attribute": "scrim",
        "reflect": false,
        "defaultValue": "\"medium\""
      }
    };
  }
  static get events() {
    return [{
        "method": "ezCloseModal",
        "name": "ezCloseModal",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido quando o modal \u00E9 fechado."
        },
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        }
      }, {
        "method": "ezOpenModal",
        "name": "ezOpenModal",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido quando o modal \u00E9 aberto."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "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 watchers() {
    return [{
        "propName": "opened",
        "methodName": "observeOpened"
      }];
  }
}
