import { Host, h, } from "@stencil/core";
export class InputMeasure {
  constructor() {
    this.name = "size";
    this.disabled = false;
    this.required = false;
    this.value = undefined;
    this.lines = "full";
    this.label = undefined;
    this.labelPosition = "stacked";
    this.unit = "ft";
    this.unitOptions = [
      {
        name: "feet",
        label: "Feet",
        value: "ft",
      },
      {
        name: "inche",
        label: "Inches",
        value: "in",
      },
    ];
    this.disableUnit = false;
    this.totalInches = undefined;
  }
  async onValue(value, oldVal) {
    if (`${value}` === `${oldVal}`)
      return;
    const [feet, inchesDecimal] = (this.value || 0).toString().split(".");
    const inches = Math.round(parseFloat(`0.${inchesDecimal || 0}`) * 12);
    this.totalInches = parseInt(feet || "0") * 12 + inches;
    if (this.unit === "ft") {
      this.feetInputEl.value = feet || 0;
      this.inchesInputEl.value = inches || 0;
    }
    else {
      this.feetInputEl.value = 0;
      this.inchesInputEl.value = this.totalInches || 0;
    }
  }
  async updateValue() {
    var _a, _b, _c;
    this.totalInches =
      this.unit === "ft"
        ? parseInt(((_a = this.feetInputEl) === null || _a === void 0 ? void 0 : _a.value) || "0") * 12 +
          parseInt(((_b = this.inchesInputEl) === null || _b === void 0 ? void 0 : _b.value) || "0")
        : parseInt(((_c = this.inchesInputEl) === null || _c === void 0 ? void 0 : _c.value) || "0");
    this.value = this.totalInches / 12;
  }
  async changeUnit(value) {
    this.unit = value || "ft";
    if (this.unit === "ft") {
      const [feet, inchesDecimal] = (this.value || 0).toString().split(".");
      const inches = Math.round(parseFloat(`0.${inchesDecimal || "0"}`) * 12);
      this.feetInputEl.value = parseInt(feet || "0");
      this.inchesInputEl.value = inches || 0;
    }
    else {
      this.feetInputEl.value = 0;
      this.inchesInputEl.value = this.totalInches || 0;
    }
  }
  render() {
    return (h(Host, null, h("ion-item", { style: {
        "--padding-start": "4px",
        "--inner-padding-end": "0",
      }, lines: this.lines }, this.label && (h("ion-label", { position: this.labelPosition }, this.label)), h("ion-grid", { class: "ion-no-padding" }, h("ion-row", { class: "ion-no-padding", style: {
        paddingTop: "8px",
      } }, h("ion-col", { class: "ion-no-padding", style: {
        position: "relative",
        opacity: this.unit === "ft" ? "1" : "0",
        height: this.unit === "ft" ? "auto" : "0",
      }, size: this.unit === "ft" ? "6" : "12" }, h("ion-input", { ref: (el) => (this.feetInputEl = el), disabled: this.disabled, onIonChange: () => this.updateValue(), type: "number", placeholder: this.unit, min: 0 }), h("small", { style: {
        opacity: "0.8",
        position: "absolute",
        top: "3px",
        right: "15px",
        pointerEvents: "none",
      } }, "'")), h("ion-col", { class: "ion-no-padding", size: this.unit === "ft" ? "6" : "12", style: {
        position: "relative",
      } }, h("ion-input", { onIonChange: () => this.updateValue(), placeholder: this.unit === "ft" && "in", ref: (el) => (this.inchesInputEl = el), disabled: this.disabled, type: "number", min: 0, max: this.unit === "ft" && 11 }), h("small", { style: {
        opacity: "0.8",
        position: "absolute",
        top: "3px",
        right: "15px",
        pointerEvents: "none",
      } }, "\"")))), h("ion-chip", { slot: "end", style: { margin: "0", float: "right" } }, this.unit, h("ion-select", { style: {
        opacity: "0",
        display: "flex",
        width: "0",
        margin: "0",
        padding: "0",
      }, onIonChange: (event) => { var _a; return this.changeUnit((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); }, selectedText: this.unit, disabled: this.disableUnit, value: this.unit }, (this.unitOptions || []).map((option) => (h("ion-select-option", { value: option === null || option === void 0 ? void 0 : option.value }, (option === null || option === void 0 ? void 0 : option.label) || (option === null || option === void 0 ? void 0 : option.name))))), h("ion-icon", { name: "chevron-down-circle" }))), h("ion-input", { name: this.name, value: this.value, style: { height: "0", width: "0", opacity: "0" }, required: this.required })));
  }
  static get is() { return "floodteam-input-measure"; }
  static get originalStyleUrls() {
    return {
      "$": ["input-measure.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["input-measure.css"]
    };
  }
  static get properties() {
    return {
      "name": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "name",
        "reflect": false,
        "defaultValue": "\"size\""
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "disabled",
        "reflect": false,
        "defaultValue": "false"
      },
      "required": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "required",
        "reflect": false,
        "defaultValue": "false"
      },
      "value": {
        "type": "number",
        "mutable": true,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "value",
        "reflect": false
      },
      "lines": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"none\" | \"inset\" | \"full\"",
          "resolved": "\"full\" | \"inset\" | \"none\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "lines",
        "reflect": false,
        "defaultValue": "\"full\""
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "label",
        "reflect": false
      },
      "labelPosition": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"stacked\" | \"fixed\" | \"floating\"",
          "resolved": "\"fixed\" | \"floating\" | \"stacked\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "label-position",
        "reflect": false,
        "defaultValue": "\"stacked\""
      },
      "unit": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "\"ft\" | \"in\"",
          "resolved": "\"ft\" | \"in\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "unit",
        "reflect": false,
        "defaultValue": "\"ft\""
      },
      "unitOptions": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "Control[]",
          "resolved": "Control[]",
          "references": {
            "Control": {
              "location": "import",
              "path": "@fireenjin/components/dist/types/typings"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "defaultValue": "[\n    {\n      name: \"feet\",\n      label: \"Feet\",\n      value: \"ft\",\n    },\n    {\n      name: \"inche\",\n      label: \"Inches\",\n      value: \"in\",\n    },\n  ]"
      },
      "disableUnit": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "disable-unit",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get states() {
    return {
      "totalInches": {}
    };
  }
  static get methods() {
    return {
      "changeUnit": {
        "complexType": {
          "signature": "(value?: \"ft\" | \"in\") => Promise<void>",
          "parameters": [{
              "tags": [],
              "text": ""
            }],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      }
    };
  }
  static get watchers() {
    return [{
        "propName": "value",
        "methodName": "onValue"
      }];
  }
}
