import { Component, Prop, h, Host, State } from '@stencil/core';
import uniqueId from '../../utils/uniqueId';
import { minusBold, checkBold } from '@teliads/icons';
import stringCombiner from '../../utils/stringCombiner';
export class TeliaCheckbox {
  constructor() {
    /** Set checkbox disabled */
    this.disabled = false;
    /** Additional description id */
    this.additionalId = uniqueId('additional');
    /** Indeterminate state */
    this.indeterminate = false;
    /** Field needs to be checked, so it can be submitted  */
    this.required = false;
    /** Error description id */
    this.errorId = uniqueId('error');
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-checkbox';
    /**
     * Input has been blurred at least once.
     */
    this.touched = false;
    /**
     * Error message
     */
    this.errorMessageState = '';
    this.updateCheckedValue = () => {
      // eslint-disable-next-line @stencil/strict-boolean-conditions
      this.inputChecked = this.inputElement ? this.inputElement.checked : false;
    };
    this.updateIndeterminateState = () => {
      // eslint-disable-next-line @stencil/strict-boolean-conditions
      if (this.inputElement) {
        this.inputElement.indeterminate = this.indeterminate;
      }
    };
    /**
     * Stop event propagation for label element
     */
    this.onLabelClickHandler = (event) => {
      // Type should be EventTarget, but it doesn't support element attributes.
      const target = event.target;
      if ((target === null || target === void 0 ? void 0 : target.type) !== 'checkbox') {
        event.stopPropagation();
      }
    };
    /**
     * Update error message and keep native input error message in sync.
     */
    this.updateErrorMessage = message => {
      var _a;
      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message);
      this.errorMessageState = message;
    };
    this.updateErrorState = () => {
      if (this.errorMessage) {
        this.updateErrorMessage(this.errorMessage);
        this.touched = true;
        // General error message overrides other errors, so exit here.
        return;
      }
      if (this.required) {
        if (this.touched && !!this.requiredErrorMessage && !this.inputChecked) {
          this.updateErrorMessage(this.requiredErrorMessage);
        }
        else {
          // Clear required error
          if (!!this.requiredErrorMessage)
            this.updateErrorMessage('');
        }
      }
    };
  }
  componentWillLoad() {
    this.updateIndeterminateState();
    this.updateCheckedValue();
    this.updateErrorState();
  }
  componentWillUpdate() {
    this.updateIndeterminateState();
    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.inputElement && ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setCustomValidity)) {
      (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.setCustomValidity(this.errorMessageState);
    }
    if (this.htmlForm) {
      (_c = this.inputElement) === 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]: showError,
    });
    return (h(Host, { class: `telia-checkbox ${this.disabled ? 'telia-checkbox--disabled' : ''}` },
      h("label", { onClick: this.onLabelClickHandler, class: "telia-checkbox__main" },
        h("input", { class: {
            'telia-checkbox__input': true,
            'telia-checkbox__input--touched': this.touched,
          }, type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, checked: this.checked, ref: ref => (this.inputElement = ref), required: this.required, "aria-labelledby": this.labelledby, "aria-describedby": describedBy, onBlur: () => {
            this.touched = true;
            this.updateErrorState();
          }, onChange: () => {
            this.updateCheckedValue();
            this.updateErrorState();
          }, onInvalid: event => {
            event.preventDefault();
            this.touched = true;
            this.updateErrorState();
          }, form: this.htmlForm }),
        h("div", { class: "telia-checkbox__fake-checkbox-wrapper" },
          h("div", { class: "telia-checkbox__fake-checkbox" },
            h("telia-icon", { class: "telia-checkbox__icon", svg: this.indeterminate ? minusBold.svg : checkBold.svg, size: "sm" }))),
        h("telia-vst", { dataTrackingId: this.dataTrackingId }),
        h("span", { class: "telia-checkbox__label" },
          this.required && h("span", { "aria-hidden": "true" }, '* '),
          h("slot", null))),
      showAdditional && (h("telia-field-assistive-text", { class: "telia-checkbox__additional", id: this.additionalId }, this.additional)),
      showError && (h("telia-field-error", { id: this.errorId, class: "telia-checkbox__error" }, this.errorMessageState))));
  }
  static get is() { return "telia-checkbox"; }
  static get originalStyleUrls() { return {
    "$": ["telia-checkbox.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-checkbox.css"]
  }; }
  static get properties() { return {
    "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": "Set checkbox disabled"
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "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
    },
    "value": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Input value attribute"
      },
      "attribute": "value",
      "reflect": false
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Input name attribute"
      },
      "attribute": "name",
      "reflect": false
    },
    "additional": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Additional description"
      },
      "attribute": "additional",
      "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')"
    },
    "checked": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Check state of input"
      },
      "attribute": "checked",
      "reflect": false
    },
    "indeterminate": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Indeterminate state"
      },
      "attribute": "indeterminate",
      "reflect": false,
      "defaultValue": "false"
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Field needs to be checked, so it can be submitted"
      },
      "attribute": "required",
      "reflect": false,
      "defaultValue": "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
    },
    "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
    },
    "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')"
    },
    "labelledby": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Id of element that should label the checkbox, if the label is not provided as content of the component. This is useful when the label is not meant to be \"inside\" the component, for instance in a column layout."
      },
      "attribute": "labelledby",
      "reflect": false
    }
  }; }
  static get states() { return {
    "touched": {},
    "inputChecked": {},
    "errorMessageState": {}
  }; }
}
