import { Component, State, h, Prop } from '@stencil/core';
import uniqueId from '../../utils/uniqueId';
import stringCombiner from '../../utils/stringCombiner';
export class TeliaTextArea {
  constructor() {
    /** Additional description id */
    this.additionalId = uniqueId('additional');
    /** Disabled state */
    this.disabled = false;
    /** Error description id */
    this.errorId = uniqueId('error');
    /** Textarea input element id */
    this.inputId = uniqueId('textareaId');
    /** Required state */
    this.required = false;
    /** Textarea rows */
    this.rows = 4;
    /** Checks if textarea will be checked for spelling errors */
    this.spellcheck = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-textarea';
    /**
     * Real time value of input
     */
    this.inputValue = '';
    /**
     * Error message
     */
    this.errorMessageState = '';
    this.updateInputValue = () => {
      // eslint-disable-next-line @stencil/strict-boolean-conditions
      this.inputValue = this.textAreaElement
        ? this.textAreaElement.value
        : this.value;
    };
    /**
     * Check if input value is empty, so required should be triggered.
     */
    this.isValueMissing = () => {
      return this.inputValue.length === 0;
    };
    /**
     * Check if input value is empty, so required should be triggered.
     */
    this.isValueLessThanMinlength = () => {
      return this.inputValue.length < this.minlength;
    };
    /**
     * Update error message and keep native input error message in sync.
     */
    this.updateErrorMessage = message => {
      var _a;
      (_a = this.textAreaElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message);
      this.errorMessageState = message;
    };
    this.updateErrorState = () => {
      var _a, _b, _c;
      const errorMessageIsSet = !!((_a = this.errorMessageState) === null || _a === void 0 ? void 0 : _a.length);
      const requiredInUse = this.required;
      const generalErrorInUse = !!((_b = this.errorMessage) === null || _b === void 0 ? void 0 : _b.length);
      const minlengthInUse = this.minlength;
      const minlengthErrorMessageIsSet = !!((_c = this.minlengthErrorMessage) === null || _c === void 0 ? void 0 : _c.length);
      if (generalErrorInUse) {
        this.updateErrorMessage(this.errorMessage);
        this.touched = true;
        // General error message overrides other errors, so exit here.
        return;
      }
      if (requiredInUse) {
        if (this.touched &&
          !!this.requiredErrorMessage &&
          this.isValueMissing()) {
          this.updateErrorMessage(this.requiredErrorMessage);
        }
      }
      if (minlengthInUse) {
        if (this.touched &&
          !!this.minlengthErrorMessage &&
          this.isValueLessThanMinlength()) {
          this.updateErrorMessage(this.minlengthErrorMessage);
        }
      }
      // Clean error message if needed
      if (errorMessageIsSet || minlengthErrorMessageIsSet) {
        if (generalErrorInUse)
          return;
        if (requiredInUse && this.isValueMissing())
          return;
        if (minlengthInUse && this.isValueLessThanMinlength())
          return;
        this.updateErrorMessage('');
      }
    };
    /**
     * Input has been blurred at least once.
     */
    this.touched = false;
  }
  componentWillLoad() {
    this.updateInputValue();
    this.updateErrorState();
  }
  componentWillUpdate() {
    this.updateErrorState();
  }
  componentDidRender() {
    // This check is for Stencil unit tests. Input element is mocked,
    // but setCustomValidity method is not. It is undefined.
    var _a, _b, _c;
    // eslint-disable-next-line @stencil/strict-boolean-conditions
    if (this.textAreaElement && ((_a = this.textAreaElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity)) {
      (_b = this.textAreaElement) === null || _b === void 0 ? void 0 : _b.setCustomValidity(this.errorMessageState);
    }
    if (this.htmlForm) {
      (_c = this.textAreaElement) === null || _c === void 0 ? void 0 : _c.setAttribute('form', this.htmlForm);
    }
  }
  render() {
    const showError = this.touched && !!this.errorMessageState.length;
    const showAdditional = !!this.additional;
    const describedBy = stringCombiner({
      [this.additionalId]: showAdditional,
      [this.errorId]: this.errorMessageState.length,
    });
    return (h("div", { class: "telia-textarea" },
      h("textarea", { class: {
          'telia-textarea__textarea': true,
          'telia-textarea__textarea--touched': !!this.touched,
        }, "aria-describedby": describedBy, disabled: this.disabled, id: this.inputId, value: this.value, maxlength: this.maxlength, minlength: this.minlength, name: this.name, ref: ref => (this.textAreaElement = ref), required: this.required, rows: this.rows, spellcheck: this.spellcheck, onInput: () => {
          this.updateInputValue();
          this.updateErrorState();
        }, onBlur: () => {
          this.touched = true;
          this.updateErrorState();
        }, onInvalid: event => {
          event.preventDefault();
          this.touched = true;
          this.updateErrorState();
        }, form: this.htmlForm }, this.value),
      h("telia-label", { class: "telia-textarea__label", htmlFor: this.inputId },
        this.required && h("span", { "aria-hidden": "true" }, '* '),
        this.label),
      showAdditional && (h("telia-field-assistive-text", { class: "telia-textarea__additional", id: this.additionalId }, this.additional)),
      showError && (h("telia-field-error", { id: this.errorId, class: "telia-textarea__error" }, this.errorMessageState)),
      h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get is() { return "telia-textarea"; }
  static get originalStyleUrls() { return {
    "$": ["telia-textarea.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-textarea.css"]
  }; }
  static get properties() { return {
    "additional": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Additional description"
      },
      "attribute": "additional",
      "reflect": false
    },
    "htmlForm": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "ID of the form this component belongs to. Should only be set If the component is not wrapped inside its form element."
      },
      "attribute": "html-form",
      "reflect": false
    },
    "additionalId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Additional description id"
      },
      "attribute": "additional-id",
      "reflect": false,
      "defaultValue": "uniqueId('additional')"
    },
    "dataTestid": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Test id set for web component host"
      },
      "attribute": "data-testid",
      "reflect": false
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Disabled state"
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "errorId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Error description id"
      },
      "attribute": "error-id",
      "reflect": false,
      "defaultValue": "uniqueId('error')"
    },
    "inputId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Textarea input element id"
      },
      "attribute": "input-id",
      "reflect": false,
      "defaultValue": "uniqueId('textareaId')"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Label of textarea input"
      },
      "attribute": "label",
      "reflect": false
    },
    "minlength": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Textarea input minimum length"
      },
      "attribute": "minlength",
      "reflect": false
    },
    "maxlength": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Textarea input maximum length"
      },
      "attribute": "maxlength",
      "reflect": false
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Name of the form control when submitted"
      },
      "attribute": "name",
      "reflect": false
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Required state"
      },
      "attribute": "required",
      "reflect": false,
      "defaultValue": "false"
    },
    "rows": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Textarea rows"
      },
      "attribute": "rows",
      "reflect": false,
      "defaultValue": "4"
    },
    "spellcheck": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Checks if textarea will be checked for spelling errors"
      },
      "attribute": "spellcheck",
      "reflect": false,
      "defaultValue": "false"
    },
    "value": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Value of textarea input"
      },
      "attribute": "value",
      "reflect": false
    },
    "errorMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "General error message, which overrides other error messages and is shown at initial render"
      },
      "attribute": "error-message",
      "reflect": false
    },
    "minlengthErrorMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Error message for minlength"
      },
      "attribute": "minlength-error-message",
      "reflect": false
    },
    "requiredErrorMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Error message for required"
      },
      "attribute": "required-error-message",
      "reflect": false
    }
  }; }
  static get states() { return {
    "inputValue": {},
    "errorMessageState": {},
    "touched": {}
  }; }
}
