import { Host, h } from '@stencil/core';
import { ElementIDUtils } from '@sankhyalabs/core';
import { ApplicationUtils } from "../../utils";
import initI18n from '../../utils/i18n';
export class EzTextEdit {
  constructor() {
    this._newValue = undefined;
    this.value = undefined;
    this.styled = undefined;
  }
  /**
   * Aplica foco no campo.
   */
  async applyFocusSelect() {
    this.calcSizeInput(this.value, true);
  }
  calcSizeInput(value, setSelect = false) {
    var _a, _b;
    const textInput = (_b = (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
    if (textInput != undefined) {
      const sizeText = this.getWidthValue(value);
      textInput.style.width = sizeText + 'px';
      if (setSelect) {
        setTimeout(() => textInput.select(), 100);
      }
    }
  }
  getWidthValue(value) {
    if (this._valueBasis != undefined) {
      const span = this._valueBasis;
      if (value != undefined) {
        const cursorSpace = 2;
        span.innerHTML = value;
        return span.clientWidth > 0 ? (span.clientWidth + cursorSpace) : cursorSpace;
      }
      else {
        span.innerHTML = "";
      }
    }
    return 0;
  }
  setStyledInput() {
    var _a, _b;
    let fontSize = "";
    let fontWeight = "";
    let fontFamily = "";
    if (this.styled != undefined) {
      fontSize = this.styled.fontSize;
      fontWeight = this.styled.fontWeight;
      fontFamily = this.styled.fontFamily;
    }
    const textInput = (_b = (_a = this._inputElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
    if (textInput != undefined) {
      textInput.style.fontSize = fontSize;
      textInput.style.fontWeight = fontWeight;
      textInput.style.fontFamily = fontFamily;
    }
    const span = this._valueBasis;
    if (span != undefined) {
      span.style.fontSize = fontSize;
      span.style.fontWeight = fontWeight;
      span.style.fontFamily = fontFamily;
    }
  }
  handleSaveEdition() {
    if (!this._newValue) {
      ApplicationUtils.alert(this.i18n("app.warning"), this.i18n("ez-text-edit.emptyFieldWarning")).then(() => {
        this.setNewValue(this.value, true);
      });
      return;
    }
    this.saveEdition.emit({ value: this.value, newValue: this._newValue });
  }
  handleCancelEdition() {
    this.cancelEdition.emit();
  }
  setNewValue(value, setSelect = false) {
    this._newValue = value;
    this.calcSizeInput(this._newValue, setSelect);
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  componentDidLoad() {
    this.applyFocusSelect();
    this.setNewValue(this.value);
  }
  componentDidRender() {
    this.setStyledInput();
  }
  render() {
    ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
    return (h(Host, null, h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }), h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), onInput: () => { this.calcSizeInput(this._newValue); }, class: "text-edit__form-input", value: this._newValue, ref: (elem) => this._inputElement = elem, mode: "slim", onEzChange: (evt) => this.setNewValue(evt === null || evt === void 0 ? void 0 : evt.detail), noBorder: true }), h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }), h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.handleCancelEdition(); } })));
  }
  static get is() { return "ez-text-edit"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-text-edit.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-text-edit.css"]
    };
  }
  static get properties() {
    return {
      "value": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o valor do campo."
        },
        "attribute": "value",
        "reflect": false
      },
      "styled": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "IStyled",
          "resolved": "IStyled",
          "references": {
            "IStyled": {
              "location": "local"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define atributos do estilo."
        }
      }
    };
  }
  static get states() {
    return {
      "_newValue": {}
    };
  }
  static get events() {
    return [{
        "method": "saveEdition",
        "name": "saveEdition",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido ao salvar uma edi\u00E7\u00E3o"
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }, {
        "method": "cancelEdition",
        "name": "cancelEdition",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido ao cancelar uma edi\u00E7\u00E3o"
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get methods() {
    return {
      "applyFocusSelect": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Aplica foco no campo.",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "_element"; }
}
