import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { a as apiFetch } from './fetch.js';
import { g as getProcessorData } from './processor.js';
import { d as defineCustomElement$3 } from './sc-skeleton2.js';
import { d as defineCustomElement$2 } from './sc-stripe-payment-element2.js';
import { d as defineCustomElement$1 } from './sc-text2.js';

const shouldReloadElement = (intent, order) => {
  var _a, _b;
  if (((_b = (_a = order === null || order === void 0 ? void 0 : order.line_items) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.count) === 0)
    return false; // we need items in the cart.
  if ((intent === null || intent === void 0 ? void 0 : intent.amount) === 0 && (order === null || order === void 0 ? void 0 : order.amount_due) !== 0)
    return true;
  if ((intent === null || intent === void 0 ? void 0 : intent.amount) > 0 && (order === null || order === void 0 ? void 0 : order.amount_due) === 0)
    return true;
  return false;
};

const scOrderStripePaymentElementCss = ":host{display:block}.loader{display:grid;height:128px;gap:2em}.loader__row{display:flex;align-items:flex-start;justify-content:space-between;gap:1em}.loader__details{display:grid;gap:0.5em}";

const ScOrderStripePaymentElement = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.scPaid = createEvent(this, "scPaid", 7);
    this.scPayError = createEvent(this, "scPayError", 7);
    this.scSetPaymentIntent = createEvent(this, "scSetPaymentIntent", 7);
    /** Available processors */
    this.processors = [];
    /** Payment mode. */
    this.mode = 'live';
    /** The currency code for the payment element. */
    this.currencyCode = 'usd';
  }
  async componentDidLoad() {
    var _a, _b, _c;
    this.paymentIntent = (await apiFetch({
      method: 'POST',
      path: 'surecart/v1/payment_intents',
      data: {
        amount: typeof ((_a = this === null || this === void 0 ? void 0 : this.order) === null || _a === void 0 ? void 0 : _a.amount_due) === 'number' ? this.order.amount_due : 100,
        currency: this.currencyCode,
        processor_type: 'stripe',
        live_mode: this.mode === 'live',
      },
    }));
    this.clientSecret = (_c = (_b = this.paymentIntent.processor_data) === null || _b === void 0 ? void 0 : _b.stripe) === null || _c === void 0 ? void 0 : _c.client_secret;
  }
  async updatePaymentIntent() {
    var _a, _b, _c;
    if (!((_a = this.paymentIntent) === null || _a === void 0 ? void 0 : _a.id)) {
      return;
    }
    this.paymentIntent = (await apiFetch({
      method: 'PATCH',
      path: `surecart/v1/payment_intents/${this.paymentIntent.id}`,
      data: {
        amount: this.order.amount_due,
        currency: this.currencyCode,
        processor_type: 'stripe',
        live_mode: this.mode === 'live',
      },
    }));
    this.clientSecret = (_c = (_b = this.paymentIntent.processor_data) === null || _b === void 0 ? void 0 : _b.stripe) === null || _c === void 0 ? void 0 : _c.client_secret;
  }
  async handleOrderChange() {
    if (!shouldReloadElement(this.paymentIntent, this.order))
      return;
    this.clientSecret = null;
    await this.updatePaymentIntent();
  }
  /**
   * When the payment intent is first set,
   * we need to sync it if we have an order.
   */
  async handlePaymentIntentChange() {
    // check if we should reload the payment intent
    if (shouldReloadElement(this.paymentIntent, this.order)) {
      await this.updatePaymentIntent();
    }
    // update payment intent in form when it's set.
    this.scSetPaymentIntent.emit({ processor: 'stripe', payment_intent: this.paymentIntent });
  }
  render() {
    // get account id and publishable key from the stripe processor for this mode.
    const data = getProcessorData(this.processors, 'stripe', this.mode);
    return (h("sc-stripe-payment-element", { order: this.order, address: this.address, "client-secret": this.clientSecret, publishableKey: data === null || data === void 0 ? void 0 : data.publishable_key, accountId: data === null || data === void 0 ? void 0 : data.account_id, key: this.clientSecret }));
  }
  static get watchers() { return {
    "order": ["handleOrderChange"],
    "paymentIntent": ["handlePaymentIntentChange"]
  }; }
  static get style() { return scOrderStripePaymentElementCss; }
}, [0, "sc-order-stripe-payment-element", {
    "processors": [16],
    "mode": [1],
    "currencyCode": [1, "currency-code"],
    "order": [16],
    "address": [4],
    "stripe": [32],
    "clientSecret": [32],
    "paymentIntent": [32],
    "error": [32],
    "confirming": [32]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-order-stripe-payment-element", "sc-skeleton", "sc-stripe-payment-element", "sc-text"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-order-stripe-payment-element":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScOrderStripePaymentElement);
      }
      break;
    case "sc-skeleton":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "sc-stripe-payment-element":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "sc-text":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { ScOrderStripePaymentElement as S, defineCustomElement as d };
