import { Component, Host, h, Prop, Fragment, State, Event, Watch } from '@stencil/core';
import { __ } from '@wordpress/i18n';
import { intervalString } from '../../../../functions/price';
import { getLineItemByProductId } from '@store/checkout/getters';
import { formBusy } from '@store/form/getters';
import { onChange } from '@store/checkout';
export class ScProductSelectedPrice {
  /** 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 is() { return "sc-product-selected-price"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-product-selected-price.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-product-selected-price.css"]
  }; }
  static get properties() { return {
    "productId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The product id."
      },
      "attribute": "product-id",
      "reflect": false
    }
  }; }
  static get states() { return {
    "showInput": {},
    "adHocAmount": {}
  }; }
  static get events() { return [{
      "method": "scUpdateLineItem",
      "name": "scUpdateLineItem",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Toggle line item event"
      },
      "complexType": {
        "original": "LineItemData",
        "resolved": "LineItemData",
        "references": {
          "LineItemData": {
            "location": "import",
            "path": "src/types"
          }
        }
      }
    }]; }
  static get watchers() { return [{
      "propName": "showInput",
      "methodName": "handleShowInputChange"
    }]; }
}
