import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
import { _ as __ } from './default-i18n.js';
import './index2.js';
import { i as intervalString } from './price.js';
import { g as getLineItemByProductId } from './getters2.js';
import { f as formBusy } from './getters3.js';
import { o as onChange } from './watchers.js';
import { d as defineCustomElement$a } from './sc-button2.js';
import { d as defineCustomElement$9 } from './sc-form2.js';
import { d as defineCustomElement$8 } from './sc-form-control2.js';
import { d as defineCustomElement$7 } from './sc-format-number2.js';
import { d as defineCustomElement$6 } from './sc-icon2.js';
import { d as defineCustomElement$5 } from './sc-input2.js';
import { d as defineCustomElement$4 } from './sc-price-input2.js';
import { d as defineCustomElement$3 } from './sc-spinner2.js';
import { d as defineCustomElement$2 } from './sc-tooltip2.js';

const scProductSelectedPriceCss = ":host{display:block}sc-form{width:100%}.selected-price{display:flex;align-items:center;gap:var(--sc-spacing-small);flex-wrap:wrap}.selected-price__wrap{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sc-spacing-xx-small);color:var(--sc-selected-price-color, var(--sc-color-gray-800));line-height:1}.selected-price__price{font-size:var(--sc-font-size-xxx-large);font-weight:var(--sc-font-weight-bold);white-space:nowrap}.selected-price__interval{font-weight:var(--sc-font-weight-bold);opacity:0.65;white-space:nowrap}.selected-price__scratch-price{opacity:0.65;font-weight:var(--sc-font-weight-normal);text-decoration:line-through}";

const ScProductSelectedPrice$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.scUpdateLineItem = createEvent(this, "scUpdateLineItem", 7);
  }
  /** The line item from state. */
  lineItem() {
    return getLineItemByProductId(this.productId);
  }
  componentWillLoad() {
    onChange('checkout', () => {
      var _a, _b, _c;
      this.adHocAmount = ((_a = this.lineItem()) === null || _a === void 0 ? void 0 : _a.ad_hoc_amount) || ((_c = (_b = this.lineItem()) === null || _b === void 0 ? void 0 : _b.price) === null || _c === void 0 ? void 0 : _c.amount);
    });
  }
  updatePrice() {
    var _a, _b, _c;
    this.showInput = false;
    if (!this.adHocAmount && this.adHocAmount !== 0)
      return;
    if (this.adHocAmount === ((_a = this.lineItem()) === null || _a === void 0 ? void 0 : _a.ad_hoc_amount))
      return;
    this.scUpdateLineItem.emit({ price_id: (_c = (_b = this.lineItem()) === null || _b === void 0 ? void 0 : _b.price) === null || _c === void 0 ? void 0 : _c.id, quantity: 1, ad_hoc_amount: this.adHocAmount });
  }
  handleShowInputChange(val) {
    if (val) {
      setTimeout(() => {
        this.input.triggerFocus();
      }, 50);
    }
  }
  render() {
    var _a, _b, _c, _d, _e;
    const price = (_a = this.lineItem()) === null || _a === void 0 ? void 0 : _a.price;
    if (!price)
      return h(Host, { style: { display: 'none' } });
    return (h("div", { class: { 'selected-price': true } }, this.showInput ? (h("sc-form", { onScSubmit: e => {
        e.preventDefault();
        e.stopImmediatePropagation();
        this.updatePrice();
      }, onScFormSubmit: e => {
        e.preventDefault();
        e.stopImmediatePropagation();
      } }, h("sc-price-input", { ref: el => (this.input = el), size: "large", "currency-code": (price === null || price === void 0 ? void 0 : price.currency) || 'usd', min: price === null || price === void 0 ? void 0 : price.ad_hoc_min_amount, max: price === null || price === void 0 ? void 0 : price.ad_hoc_max_amount, placeholder: '0.00', required: true, value: (_c = (_b = this.adHocAmount) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b), onScInput: e => (this.adHocAmount = parseInt(e.target.value)) }, h("sc-button", { slot: "suffix", type: "link", submit: true }, __('Update', 'surecart'))))) : (h(Fragment, null, h("div", { class: "selected-price__wrap" }, h("span", { class: "selected-price__price" }, (price === null || price === void 0 ? void 0 : price.scratch_amount) > price.amount && (h(Fragment, null, h("sc-format-number", { class: "selected-price__scratch-price", part: "price__scratch", type: "currency", currency: price === null || price === void 0 ? void 0 : price.currency, value: price === null || price === void 0 ? void 0 : price.scratch_amount }), ' ')), h("sc-format-number", { type: "currency", currency: price === null || price === void 0 ? void 0 : price.currency, value: ((_d = this.lineItem()) === null || _d === void 0 ? void 0 : _d.ad_hoc_amount) !== null ? (_e = this.lineItem()) === null || _e === void 0 ? void 0 : _e.ad_hoc_amount : price === null || price === void 0 ? void 0 : price.amount })), h("span", { class: "selected-price__interval" }, intervalString(price, {
      labels: {
        interval: '/',
        period: 
        /** translators: used as in time period: "for 3 months" */
        __('for', 'surecart'),
      },
    }))), (price === null || price === void 0 ? void 0 : price.ad_hoc) && !formBusy() && (h("sc-button", { class: "selected-price__change-amount", type: "primary", size: "small", onClick: () => (this.showInput = true) }, h("sc-icon", { name: "edit", slot: "prefix" }), __('Change Amount', 'surecart')))))));
  }
  static get watchers() { return {
    "showInput": ["handleShowInputChange"]
  }; }
  static get style() { return scProductSelectedPriceCss; }
}, [1, "sc-product-selected-price", {
    "productId": [1, "product-id"],
    "showInput": [32],
    "adHocAmount": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-product-selected-price", "sc-button", "sc-form", "sc-form-control", "sc-format-number", "sc-icon", "sc-input", "sc-price-input", "sc-spinner", "sc-tooltip"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-product-selected-price":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScProductSelectedPrice$1);
      }
      break;
    case "sc-button":
      if (!customElements.get(tagName)) {
        defineCustomElement$a();
      }
      break;
    case "sc-form":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "sc-form-control":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "sc-format-number":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "sc-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "sc-input":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "sc-price-input":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "sc-spinner":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "sc-tooltip":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const ScProductSelectedPrice = ScProductSelectedPrice$1;
const defineCustomElement = defineCustomElement$1;

export { ScProductSelectedPrice, defineCustomElement };
