import { Component, Prop, h, Host, State } from '@stencil/core';
import uniqueId from '../../utils/uniqueId';
export class TeliaChipChoice {
  constructor() {
    /** Set chip disabled */
    this.disabled = false;
    /** Input element id */
    this.inputId = uniqueId('input');
    /** Id of the element containing the unavailable text */
    this.unavailableElementId = uniqueId('unavailable');
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-chip-choice';
    this.largeDiagonal = this.createDiagonal(40, 42);
    this.smallDiagonal = this.createDiagonal(24, 42);
    this.diagonal = this.largeDiagonal;
    this.getElementRef = (el) => {
      this.labelEl = el;
    };
    /**
     * Returns content provided via props or fallbacks to slots
     * @private
     */
    this.renderContent = () => {
      if (this.text) {
        return this.text;
      }
      return h("slot", null);
    };
  }
  componentDidLoad() {
    if (this.unavailable) {
      /**
       * Only change state if the chip is small,
       * else use the default diagonal.
       */
      const style = this.getLabelStyle();
      if (style && !this.isWide(style)) {
        this.diagonal = this.smallDiagonal;
      }
    }
  }
  componentDidRender() {
    // This check is for Stencil unit tests. Input element is mocked,
    // but setCustomValidity method is not. It is undefined.
    var _a;
    // eslint-disable-next-line @stencil/strict-boolean-conditions
    if (this.htmlForm) {
      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setAttribute('form', this.htmlForm);
    }
  }
  createDiagonal(width, height) {
    return (h("svg", { "aria-hidden": "true", width: width, height: height, class: "telia-chip-choice__svg", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
      h("line", { id: "svg-line1", x1: "1", x2: width - 1, y1: "-3", y2: "45", "stroke-width": "1" })));
  }
  getLabelStyle() {
    /**
     * If this is called before the comonent
     * has rendered, the labelEl is null.
     * This will throw an error unless wrapped
     * in try/catch.
     */
    try {
      return window.getComputedStyle(this.labelEl);
    }
    catch (e) {
      console.error(e);
      return null;
    }
  }
  isWide(style) {
    const paddings = [style.paddingLeft, style.paddingRight];
    const paddingCombined = paddings.reduce((acc, current) => acc + parseInt(current), 0) - 8;
    let width = this.labelEl.offsetWidth - paddingCombined;
    if (width <= 37) {
      return false;
    }
    else {
      return true;
    }
  }
  render() {
    return (h(Host, { class: "telia-chip-choice" },
      h("div", { class: "telia-chip-choice__wrapper" },
        h("input", { id: this.inputId, class: "telia-chip-choice__input", type: "radio", ref: ref => (this.inputElement = ref), name: this.name, value: this.value, disabled: this.disabled, checked: this.checked, "aria-describedby": this.unavailable ? this.unavailableElementId : null, form: this.htmlForm }),
        h("label", { class: "telia-chip-choice__label", htmlFor: this.inputId, ref: this.getElementRef, onClick: ev => ev.stopPropagation() }, this.renderContent()),
        h("p", { id: this.unavailableElementId, class: "telia-chip-choice__ally-unavailable" }, this.unavailable),
        this.unavailable && this.diagonal,
        h("telia-vst", { dataTrackingId: this.dataTrackingId }))));
  }
  static get is() { return "telia-chip-choice"; }
  static get originalStyleUrls() { return {
    "$": ["telia-chip-choice.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-chip-choice.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 chip 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
    },
    "inputId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Input element id"
      },
      "attribute": "input-id",
      "reflect": false,
      "defaultValue": "uniqueId('input')"
    },
    "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
    },
    "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
    },
    "unavailable": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If set, the option this chip represents is unavailable. The chip can\nstill be selected.  Use case: product size is not available, but selecting\nit will reveal when back in stock.\n\nUnavailable chips are displayed with a different style. The content of this\nprop will be added as `aria-describedby` in a hidden element, allowing\nassistive technology to inform the user that the option is unavailable, even\nthough the user may not be able to see the visual indication of availability."
      },
      "attribute": "unavailable",
      "reflect": false
    },
    "unavailableElementId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Id of the element containing the unavailable text"
      },
      "attribute": "unavailable-element-id",
      "reflect": false,
      "defaultValue": "uniqueId('unavailable')"
    },
    "text": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Text which will be displayed inside the chip button"
      },
      "attribute": "text",
      "reflect": false
    }
  }; }
  static get states() { return {
    "diagonal": {}
  }; }
}
