import { h } from "@stencil/core";
import { ElementIDUtils } from "@sankhyalabs/core";
import { ApplicationUtils } from "../../utils";
import initI18n from '../../utils/i18n';
export class EzCollapsibleBox {
  constructor() {
    this._activeEditText = false;
    this.value = false;
    this.boxBordered = false;
    this.label = undefined;
    this.subtitle = undefined;
    this.headerSize = "small";
    this.iconPlacement = "left";
    this.headerAlign = "left";
    this.removable = false;
    this.editable = false;
    this.conditionalSave = undefined;
  }
  /**
   * Oculta/mostra o conteúdo do ez-collapsible-box.
   */
  async showHide() {
    this.value = !this.value;
  }
  /**
   * Aplica o foco no campo de edição de título.
   */
  async applyFocusTextEdit() {
    var _a;
    (_a = this._refTextEdit) === null || _a === void 0 ? void 0 : _a.applyFocusSelect();
  }
  /**
   * Cancela a edição de título.
   */
  async cancelEdition() {
    this._activeEditText = false;
    this.ezEditLabelMode.emit(this._activeEditText);
  }
  observeCollapsedValue() {
    this.ezChange.emit(this.value);
  }
  /**
   * Retorna o tamanho configurado do texto e do ícone.
   */
  getHeaderSize() {
    const sizeAlias = ["xsmall", "xlarge"];
    const sizeList = ["x-small", "small", "medium", "large", "x-large"];
    const sizeLowerCase = this.headerSize && this.headerSize.toLowerCase();
    const sizeCustom = sizeAlias.includes(sizeLowerCase) ? sizeLowerCase.replace('x', 'x-') : sizeLowerCase;
    return sizeList.includes(sizeCustom) ? sizeCustom : "small";
  }
  removeElement() {
    this._hostElement && this._hostElement.remove();
    this.ezRemove.emit(this);
  }
  editLabel(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    this._activeEditText = true;
    this.ezEditLabelMode.emit(this._activeEditText);
  }
  async confirmRemove(evt) {
    evt.stopPropagation();
    const confirmMessage = this.i18n("ez-collapsible-box.confirmRemove", { label: this.label });
    const canRemove = await ApplicationUtils.confirm(this.i18n("app.warning"), confirmMessage);
    if (canRemove) {
      this.removeElement();
    }
  }
  saveEditionText(editDetails) {
    const { value, newValue } = editDetails.detail;
    if (value === newValue) {
      this.cancelEdition();
      return;
    }
    let canSave = true;
    if (this.conditionalSave) {
      canSave = this.conditionalSave(newValue);
    }
    if (this.label !== newValue && canSave) {
      this.label = newValue;
      this._activeEditText = false;
      this.ezSaveEditLabel.emit(editDetails.detail);
      this.ezEditLabelMode.emit(this._activeEditText);
    }
  }
  getStyledLabel() {
    if (this._refLabel == undefined) {
      return;
    }
    let styledLabel = {
      fontSize: window.getComputedStyle(this._refLabel).getPropertyValue('font-size'),
      fontWeight: window.getComputedStyle(this._refLabel).getPropertyValue('font-weight'),
      fontFamily: window.getComputedStyle(this._refLabel).getPropertyValue('font-family')
    };
    return styledLabel;
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  componentDidLoad() {
    ElementIDUtils.addIDInfo(this._hostElement);
  }
  render() {
    return (h("div", { class: `collapsible-box ${this.boxBordered && 'collapsable-box--bordered'}` }, h("div", { class: "collapsible-box__header" }, h("button", Object.assign({}, (!this._activeEditText ? { onClick: () => { this.showHide(); } } : null), { class: "collapsible-box__title collapsible-box__title--" + (this.headerAlign || "left") +
        (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
        (this.value ? " collapsible-box__title--no-margin" : "") }), h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : ""), id: "toggleCollapsible" }), !this._activeEditText ?
      h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem }, h("span", null, this.label), this.editable &&
        h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: this.i18n("app.edit") }), this.removable &&
        h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: this.i18n("app.remove") })) :
      h("ez-text-edit", { class: "collapsible-box__text-edit", ref: ref => this._refTextEdit = ref, value: this.label, styled: this.getStyledLabel(), onSaveEdition: (ev) => this.saveEditionText(ev), onCancelEdition: () => this.cancelEdition() })), h("slot", { name: "rightSlot" })), h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") }, this.subtitle &&
      h("div", { class: "subtitle-box__content" }, h("label", { class: "subtitle-box__label", title: this.subtitle }, h("span", null, this.subtitle))), h("slot", null))));
  }
  static get is() { return "ez-collapsible-box"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-collapsible-box.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-collapsible-box.css"]
    };
  }
  static get properties() {
    return {
      "value": {
        "type": "boolean",
        "mutable": true,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o valor do componente."
        },
        "attribute": "value",
        "reflect": true,
        "defaultValue": "false"
      },
      "boxBordered": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define seu o componente deve ter borda"
        },
        "attribute": "box-bordered",
        "reflect": false,
        "defaultValue": "false"
      },
      "label": {
        "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 componente."
        },
        "attribute": "label",
        "reflect": true
      },
      "subtitle": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Texto a ser apresentado como subt\u00EDtulo do componente."
        },
        "attribute": "subtitle",
        "reflect": true
      },
      "headerSize": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\" | undefined",
          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o tamanho do texto e do \u00EDcone."
        },
        "attribute": "header-size",
        "reflect": true,
        "defaultValue": "\"small\""
      },
      "iconPlacement": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"left\" | \"right\"",
          "resolved": "\"left\" | \"right\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o posicionamento do \u00EDcone."
        },
        "attribute": "icon-placement",
        "reflect": true,
        "defaultValue": "\"left\""
      },
      "headerAlign": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"center\" | \"left\" | \"right\" | \"stretch\" | undefined",
          "resolved": "\"center\" | \"left\" | \"right\" | \"stretch\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define a posi\u00E7\u00E3o do conte\u00FAdo do cabe\u00E7alho do componente."
        },
        "attribute": "header-align",
        "reflect": true,
        "defaultValue": "\"left\""
      },
      "removable": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Se true mostra o \u00EDcone para remo\u00E7\u00E3o do componente."
        },
        "attribute": "removable",
        "reflect": true,
        "defaultValue": "false"
      },
      "editable": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Se true mostra o \u00EDcone para edi\u00E7\u00E3o do componente."
        },
        "attribute": "editable",
        "reflect": true,
        "defaultValue": "false"
      },
      "conditionalSave": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "Function",
          "resolved": "Function",
          "references": {
            "Function": {
              "location": "global"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define uma condi\u00E7\u00E3o para salvar ou n\u00E3o uma altera\u00E7\u00E3o."
        }
      }
    };
  }
  static get states() {
    return {
      "_activeEditText": {}
    };
  }
  static get events() {
    return [{
        "method": "ezChange",
        "name": "ezChange",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido quando acontece a altera\u00E7\u00E3o de valor do componente."
        },
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        }
      }, {
        "method": "ezRemove",
        "name": "ezRemove",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido ao remover o componente (onEzRemove)."
        },
        "complexType": {
          "original": "EzCollapsibleBox",
          "resolved": "EzCollapsibleBox",
          "references": {
            "EzCollapsibleBox": {
              "location": "global"
            }
          }
        }
      }, {
        "method": "ezSaveEditLabel",
        "name": "ezSaveEditLabel",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido ao concluir edi\u00E7\u00E3o da label (onEzSaveEditLabel)."
        },
        "complexType": {
          "original": "CustomEvent",
          "resolved": "CustomEvent<any>",
          "references": {
            "CustomEvent": {
              "location": "global"
            }
          }
        }
      }, {
        "method": "ezEditLabelMode",
        "name": "ezEditLabelMode",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido quando o modo de edi\u00E7\u00E3o da label for aberto e fechado (onEzEditLabelMode)."
        },
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        }
      }];
  }
  static get methods() {
    return {
      "showHide": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Oculta/mostra o conte\u00FAdo do ez-collapsible-box.",
          "tags": []
        }
      },
      "applyFocusTextEdit": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Aplica o foco no campo de edi\u00E7\u00E3o de t\u00EDtulo.",
          "tags": []
        }
      },
      "cancelEdition": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Cancela a edi\u00E7\u00E3o de t\u00EDtulo.",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "_hostElement"; }
  static get watchers() {
    return [{
        "propName": "value",
        "methodName": "observeCollapsedValue"
      }];
  }
}
