import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { a as getCurrencySymbol } from './price.js';
import { F as FormSubmitController } from './form-data.js';
import { i as isZeroDecimal, m as maybeConvertAmount } from './utils.js';
import { d as defineCustomElement$3 } from './sc-form-control2.js';
import { d as defineCustomElement$2 } from './sc-input2.js';
import { d as defineCustomElement$1 } from './sc-tooltip2.js';

const scPriceInputCss = ":host{display:block}";

const ScPriceInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.scChange = createEvent(this, "scChange", 7);
    /** The input's size. */
    this.size = 'medium';
    /** The input's value attribute. */
    this.value = '';
    /** Draws a pill-style input with rounded edges. */
    this.pill = false;
    /** Should we show the label */
    this.showLabel = true;
    /** The input's help text. */
    this.help = '';
    /** Adds a clear button when the input is populated. */
    this.clearable = false;
    /** Disables the input. */
    this.disabled = false;
    /** Makes the input readonly. */
    this.readonly = false;
    /** Makes the input a required field. */
    this.required = false;
    /**
     * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
     * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.
     */
    this.invalid = false;
  }
  async reportValidity() {
    return this.scInput.shadowRoot.querySelector('input').reportValidity();
  }
  /** Sets focus on the input. */
  async triggerFocus(options) {
    return this.scInput.triggerFocus(options);
  }
  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
  async setCustomValidity(message) {
    this.scInput.setCustomValidity(message);
  }
  /** Removes focus from the input. */
  async triggerBlur() {
    return this.scInput.blur();
  }
  handleFocusChange() {
    var _a, _b, _c, _d;
    this.hasFocus ? (_b = (_a = this.scInput) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a) : (_d = (_c = this.scInput) === null || _c === void 0 ? void 0 : _c.blur) === null || _d === void 0 ? void 0 : _d.call(_c);
  }
  handleChange() {
    this.updateValue();
  }
  handleInput() {
    this.updateValue();
  }
  updateValue() {
    const val = isZeroDecimal(this.currencyCode) ? parseFloat(this.scInput.value) : (parseFloat(this.scInput.value) * 100).toFixed(2);
    this.value = this.scInput.value ? val.toString() : '';
  }
  componentDidLoad() {
    this.handleFocusChange();
    this.formController = new FormSubmitController(this.el).addFormData();
    document.addEventListener('wheel', () => {
      this.scInput.triggerBlur();
    });
  }
  disconnectedCallback() {
    var _a;
    (_a = this.formController) === null || _a === void 0 ? void 0 : _a.removeFormData();
  }
  render() {
    return (h("div", null, h("sc-input", { size: this.size, label: this.label, showLabel: this.showLabel, help: this.help, ref: el => (this.scInput = el), type: "number", name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, minlength: this.minlength, maxlength: this.maxlength, min: !!this.min ? this.min / 100 : 0.0, step: 0.001, max: !!this.max ? this.max / 100 : null,
      // TODO: Test These below
      autofocus: this.autofocus, inputmode: 'decimal', onScChange: () => this.handleChange(), onScInput: () => this.handleInput(), value: maybeConvertAmount(parseFloat(this.value), this.currencyCode).toString() }, h("span", { style: { opacity: '0.5' }, slot: "prefix" }, getCurrencySymbol(this.currencyCode)), h("span", { slot: "suffix" }, h("slot", { name: "suffix" }, this.showCode && (this === null || this === void 0 ? void 0 : this.currencyCode) && h("span", { style: { opacity: '0.5' } }, this.currencyCode.toUpperCase()))))));
  }
  get el() { return this; }
  static get watchers() { return {
    "hasFocus": ["handleFocusChange"]
  }; }
  static get style() { return scPriceInputCss; }
}, [1, "sc-price-input", {
    "size": [513],
    "name": [1],
    "value": [1025],
    "pill": [516],
    "label": [1],
    "showLabel": [4, "show-label"],
    "help": [1],
    "clearable": [4],
    "placeholder": [1],
    "disabled": [516],
    "readonly": [516],
    "minlength": [2],
    "maxlength": [2],
    "max": [514],
    "min": [514],
    "required": [516],
    "invalid": [1540],
    "autofocus": [4],
    "hasFocus": [1540, "has-focus"],
    "currencyCode": [513, "currency-code"],
    "showCode": [4, "show-code"],
    "reportValidity": [64],
    "triggerFocus": [64],
    "setCustomValidity": [64],
    "triggerBlur": [64]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-price-input", "sc-form-control", "sc-input", "sc-tooltip"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-price-input":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScPriceInput);
      }
      break;
    case "sc-form-control":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "sc-input":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "sc-tooltip":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { ScPriceInput as S, defineCustomElement as d };
