import { Host, h } from '@stencil/core';
import { MaskFormatter } from './utils/maskFormatter';
import { ElementIDUtils } from '@sankhyalabs/core';
export class EzClassicInput {
  constructor() {
    this._internalValueChange = false;
    this.type = 'text';
    this.value = undefined;
    this.label = undefined;
    this.helpText = undefined;
    this.placeholder = undefined;
    this.enabled = true;
    this.readonly = false;
    this.name = undefined;
    this.minlength = undefined;
    this.maxlength = undefined;
    this.leftIconName = undefined;
    this.rightIconName = undefined;
    this.rightIconTooltip = undefined;
    this.leftIconTooltip = undefined;
    this.state = "default";
    this.leftIconClickable = false;
    this.rightIconClickable = false;
    this.mask = undefined;
    this.emitMaskedValue = false;
  }
  /**
   * Aplica o foco no campo.
   */
  async setFocus(option) {
    if (option === null || option === void 0 ? void 0 : option.selectText) {
      this._inputElem.select();
    }
    if (!(option === null || option === void 0 ? void 0 : option.preventScroll)) {
      this._inputElem.scrollIntoView({ behavior: "smooth", block: "center" });
    }
    this._inputElem.focus({ preventScroll: true });
  }
  /**
   * Remove o foco do campo.
   */
  async setBlur() {
    this._inputElem.blur();
  }
  async syncValue() {
    if (this._internalValueChange) {
      this._internalValueChange = false;
      return;
    }
    if (this.value && this._maskFormatter && this._inputElem) {
      const formattedValue = this._maskFormatter.format(this.value);
      this._inputElem.value = formattedValue;
    }
    else if (this._inputElem) {
      this._inputElem.value = this.value || '';
    }
  }
  onInput(event) {
    try {
      const inputElement = event.target;
      let inputValue = inputElement.value;
      if (this._maskFormatter) {
        const formattedValue = this._maskFormatter.format(inputValue);
        const cleanValue = this._maskFormatter.removeMask(formattedValue);
        inputElement.value = formattedValue;
        this._internalValueChange = true;
        this.value = cleanValue;
        const emitValue = this.emitMaskedValue ? formattedValue : cleanValue;
        this.ezChange.emit(emitValue);
      }
      else {
        this._internalValueChange = true;
        this.value = inputValue;
        this.ezChange.emit(inputValue);
      }
    }
    catch (error) {
      console.error("Error processing input event:", error);
    }
  }
  onBlur() {
    this.ezBlur.emit(this.value);
  }
  onFocus() {
    this.ezFocus.emit(this.value);
  }
  handleIconClick(event, icon) {
    if (!this.enabled) {
      return;
    }
    if ((icon === "left" && !this.leftIconClickable) || (icon === "right" && !this.rightIconClickable)) {
      this.setFocus({ preventScroll: true });
      return;
    }
    event.stopPropagation();
    this.iconClick.emit({ icon });
  }
  addInfoId() {
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element);
    }
    if (this._inputElem) {
      const dataInfo = { id: 'embedded' };
      ElementIDUtils.addIDInfo(this._inputElem, 'classic-input', dataInfo);
    }
  }
  componentWillLoad() {
    if (this.mask && !this._maskFormatter) {
      this._maskFormatter = new MaskFormatter(this.mask);
    }
    if (!this.placeholder && this._maskFormatter) {
      this.placeholder = this._maskFormatter.generatePlaceholder();
    }
  }
  componentDidLoad() {
    this.syncValue();
    this.addInfoId();
  }
  render() {
    return (h(Host, null, h("label", { title: this.label, htmlFor: this.name }, this.label), h("div", { class: "input-container", "data-state": this.state, "data-disabled": (!this.enabled).toString(), onClick: () => this.setFocus({ preventScroll: true }) }, this.leftIconName && (h("ez-icon", { iconName: this.leftIconName, title: this.leftIconTooltip, onClick: (event) => this.handleIconClick(event, "left"), class: { 'icon-clickable': this.leftIconClickable } })), h("input", { ref: el => this._inputElem = el, id: this.name, type: this.type, title: this.value, placeholder: this.placeholder, disabled: !this.enabled, readonly: this.readonly, name: this.name, minlength: this.minlength, maxlength: this.maxlength, onInput: (event) => this.onInput(event), onBlur: this.onBlur.bind(this), onFocus: this.onFocus.bind(this) }), this.rightIconName && (h("ez-icon", { iconName: this.rightIconName, title: this.rightIconTooltip, onClick: (event) => this.handleIconClick(event, "right"), class: { 'icon-clickable': this.rightIconClickable } }))), this.helpText && (h("span", { title: this.helpText }, this.helpText))));
  }
  static get is() { return "ez-classic-input"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-classic-input.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-classic-input.css"]
    };
  }
  static get properties() {
    return {
      "type": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Tipo do input (ex: text, password, email, etc)"
        },
        "attribute": "type",
        "reflect": false,
        "defaultValue": "'text'"
      },
      "value": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Valor do input"
        },
        "attribute": "value",
        "reflect": false
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Texto do label exibido acima do input"
        },
        "attribute": "label",
        "reflect": false
      },
      "helpText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Texto de ajuda exibido abaixo do input"
        },
        "attribute": "help-text",
        "reflect": false
      },
      "placeholder": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Placeholder do input"
        },
        "attribute": "placeholder",
        "reflect": false
      },
      "enabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define se o input est\u00E1 habilitado"
        },
        "attribute": "enabled",
        "reflect": false,
        "defaultValue": "true"
      },
      "readonly": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define se o input \u00E9 somente leitura"
        },
        "attribute": "readonly",
        "reflect": false,
        "defaultValue": "false"
      },
      "name": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Nome do input"
        },
        "attribute": "name",
        "reflect": false
      },
      "minlength": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Tamanho m\u00EDnimo do valor"
        },
        "attribute": "minlength",
        "reflect": false
      },
      "maxlength": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Tamanho m\u00E1ximo do valor"
        },
        "attribute": "maxlength",
        "reflect": false
      },
      "leftIconName": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Nome do \u00EDcone \u00E0 esquerda"
        },
        "attribute": "left-icon-name",
        "reflect": false
      },
      "rightIconName": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Nome do \u00EDcone \u00E0 direita"
        },
        "attribute": "right-icon-name",
        "reflect": false
      },
      "rightIconTooltip": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "T\u00EDtulo do \u00EDcone \u00E0 direita (tooltip)"
        },
        "attribute": "right-icon-tooltip",
        "reflect": false
      },
      "leftIconTooltip": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "T\u00EDtulo do \u00EDcone \u00E0 esquerda (tooltip)"
        },
        "attribute": "left-icon-tooltip",
        "reflect": false
      },
      "state": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"default\" | \"error\" | \"success\" | \"warning\"",
          "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Estado visual do input: default, error, success ou warning"
        },
        "attribute": "state",
        "reflect": false,
        "defaultValue": "\"default\""
      },
      "leftIconClickable": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define se o \u00EDcone da esquerda \u00E9 clic\u00E1vel"
        },
        "attribute": "left-icon-clickable",
        "reflect": false,
        "defaultValue": "false"
      },
      "rightIconClickable": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define se o \u00EDcone da direita \u00E9 clic\u00E1vel"
        },
        "attribute": "right-icon-clickable",
        "reflect": false,
        "defaultValue": "false"
      },
      "mask": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Aplica uma m\u00E1scara no conte\u00FAdo conforme o padr\u00E3o estabelecido. \nPara mais informa\u00E7\u00F5es acesse: \nhttps://gilded-nasturtium-6b64dd.netlify.app/docs/utilities/api/classes/maskformatter/"
        },
        "attribute": "mask",
        "reflect": false
      },
      "emitMaskedValue": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Define se o valor emitido pelo evento ezChange deve conter a m\u00E1scara aplicada (padr\u00E3o: false)"
        },
        "attribute": "emit-masked-value",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get events() {
    return [{
        "method": "ezChange",
        "name": "ezChange",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Evento disparado quando o valor do input muda."
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }, {
        "method": "ezBlur",
        "name": "ezBlur",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Evento disparado quando o input perde o foco."
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }, {
        "method": "ezFocus",
        "name": "ezFocus",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Evento disparado quando o input ganha o foco."
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }, {
        "method": "iconClick",
        "name": "iconClick",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Evento disparado quando um \u00EDcone \u00E9 clicado.\nPayload: { icon: \"left\" | \"right\" }"
        },
        "complexType": {
          "original": "{ icon: \"left\" | \"right\" }",
          "resolved": "{ icon: \"left\" | \"right\"; }",
          "references": {}
        }
      }];
  }
  static get methods() {
    return {
      "setFocus": {
        "complexType": {
          "signature": "(option?: OptionsSetFocus) => Promise<void>",
          "parameters": [{
              "tags": [],
              "text": ""
            }],
          "references": {
            "Promise": {
              "location": "global"
            },
            "OptionsSetFocus": {
              "location": "import",
              "path": "./interfaces/optionsSetFocus"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Aplica o foco no campo.",
          "tags": []
        }
      },
      "setBlur": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "Remove o foco do campo.",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "_element"; }
  static get watchers() {
    return [{
        "propName": "value",
        "methodName": "syncValue"
      }];
  }
}
