import { h, } from "@stencil/core";
import { States } from "src/utils/utils";
export class SwInputtext {
  constructor() {
    this.state = States.create;
    this.text = undefined;
    this.description = "Descrizione";
    this.label = "Obbligatorio";
    this.countWords = false;
    this.limitWords = 255;
    this.counter = 0;
  }
  componentWillRender() {
    this.updateText(this.text);
  }
  valueTextChange(ev) {
    this.outputText.emit(ev.target.value);
    this.updateText(ev.target.value);
  }
  updatecountWords(value) {
    this.countWords = value;
  }
  updateState(value) {
    this.state = value;
  }
  updateText(value) {
    this.text = value;
    this.counter = value.length;
  }
  updateDescription(value) {
    this.description = value;
  }
  render() {
    if (this.state === States.create || this.state === States.edit) {
      return (h("div", { class: "relative" }, h("div", { class: "description-input pointer-events-none text-brand-synbee-eolo-v1-06 text-base font-bold mb-2 absolute top-4 left-5 bg-brand-synbee-eolo-v1-18" }, this.description), h("textarea", { id: "desc-text", maxlength: this.limitWords, class: "input-text-area pt-10 pl-5 w-full min-w-[200px] h-auto min-h-[200px] bg-brand-synbee-eolo-v1-18 text-sm text-adjust-tone-04 font-bold rounded-lg whitespace-pre-wrap", onInput: (ev) => this.valueTextChange(ev) }, this.text), this.countWords && (h("div", { class: "obbligatory-param ml-4 absolute bottom-0 right-0 h-auto w-auto max-w-[100px] font-bold bg-brand-synbee-eolo-v1-06 text-sm" }, this.counter, "/", this.limitWords)), !this.countWords && (h("div", { class: "obbligatory-param ml-4 absolute bottom-0 right-0 h-auto w-auto max-w-[100px] font-bold bg-brand-synbee-eolo-v1-06 text-sm" }, this.label))));
    }
    else {
      return (h("div", { class: "relative" }, h("div", { id: "desc-text", class: "input-text-area-view pt-10 pl-5 w-full min-w-[200px] h-auto min-h-[50px] text-sm text-adjust-tone-04 rounded-lg", contentEditable: false }, this.text)));
    }
  }
  static get is() { return "sw-input-text-area"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["sw-input-text-area.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["sw-input-text-area.css"]
    };
  }
  static get properties() {
    return {
      "state": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "States",
          "resolved": "States.create | States.edit | States.view",
          "references": {
            "States": {
              "location": "import",
              "path": "src/utils/utils"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "state",
        "reflect": false,
        "defaultValue": "States.create"
      },
      "text": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "text",
        "reflect": false
      },
      "description": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "description",
        "reflect": false,
        "defaultValue": "\"Descrizione\""
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "label",
        "reflect": false,
        "defaultValue": "\"Obbligatorio\""
      },
      "countWords": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "count-words",
        "reflect": false,
        "defaultValue": "false"
      },
      "limitWords": {
        "type": "number",
        "mutable": true,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "limit-words",
        "reflect": false,
        "defaultValue": "255"
      }
    };
  }
  static get states() {
    return {
      "counter": {}
    };
  }
  static get events() {
    return [{
        "method": "outputText",
        "name": "outputText",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }];
  }
  static get watchers() {
    return [{
        "propName": "countWords",
        "methodName": "updatecountWords"
      }, {
        "propName": "state",
        "methodName": "updateState"
      }, {
        "propName": "text",
        "methodName": "updateText"
      }, {
        "propName": "description",
        "methodName": "updateDescription"
      }];
  }
}
