import { Button as A, ButtonStyle as L, ButtonType as V } from "./accelbyte-widgets107.mjs";
import { PaymentAlert as T } from "./accelbyte-widgets493.mjs";
import { ConfigKeys as M } from "./accelbyte-widgets78.mjs";
import { Ctx as R } from "./accelbyte-widgets33.mjs";
import { AlertType as _ } from "./accelbyte-widgets128.mjs";
import { ElementsConsumer as B, CardNumberElement as b, CardExpiryElement as F, CardCvcElement as G } from "@stripe/react-stripe-js";
import t, { useState as p, useEffect as E } from "react";
import { z as $ } from "zod";
import "./accelbyte-widgets737.mjs";
const H = $.enum(["card", "ideal", "sepa_debit", "fpx"]), O = ({ stripe: a, elements: n, onSubmit: s, isLoading: m }) => {
  const h = R.getAppState().getConfig() || {}, [l, d] = p({
    value: null,
    isLoading: !1,
    error: null
  }), [i, u] = p({
    cardNumber: !1,
    cardCvc: !1,
    CardExpiry: !1
  }), [y, v] = p(m), [c, N] = p({
    classes: {
      base: "stripeElement",
      complete: "stripeElement--complete",
      empty: "stripeElement--empty",
      focus: "stripeElement--focus",
      invalid: "stripeElement--invalid"
    },
    style: {
      base: {
        color: "#ffffff",
        "::placeholder": {
          color: "#3a3a3a"
        }
      },
      invalid: {
        color: "#E5605C"
      }
    }
  }), C = () => !Object.values(i).map((e) => e).includes(!1), w = async (e) => {
    if (e.preventDefault(), !C() || !a || !n || m || l.isLoading)
      return;
    const r = n.getElement(b);
    if (r) {
      d({ value: null, isLoading: !0, error: null });
      try {
        const o = await a.createPaymentMethod({
          card: r,
          type: H.enum.card
        });
        if (o.error)
          throw o.error;
        if (!o.paymentMethod)
          throw new Error("No stripe payment method result");
        d({ value: o.paymentMethod, isLoading: !1, error: null });
      } catch (o) {
        console.error(o), d({ error: o, isLoading: !1, value: null });
      }
    }
  }, x = (e) => {
    const r = !e.empty && e.complete && !e.error;
    u({ ...i, cardNumber: r });
  }, S = (e) => {
    const r = !e.empty && e.complete && !e.error;
    u({ ...i, CardExpiry: r });
  }, I = (e) => {
    const r = !e.empty && e.complete && !e.error;
    u({ ...i, cardCvc: r });
  };
  return E(() => {
    var o, g;
    const e = h[M.PAGE_CONFIG], r = (g = (o = e == null ? void 0 : e.data) == null ? void 0 : o.global) == null ? void 0 : g.colors;
    if (r) {
      const {
        text: { hex: P, rgb: f }
      } = r;
      N({
        ...c,
        style: {
          base: {
            color: P,
            "::placeholder": {
              color: `rgba(${f.r}, ${f.g}, ${f.b}, 0.65)`
            }
          }
        }
      });
    }
  }, []), E(() => {
    a && l.value && s(a, l.value);
  }, [l.value, s, a]), E(() => {
    v(m || l.isLoading);
  }, [m, l.isLoading]), l.error ? /* @__PURE__ */ t.createElement(
    T,
    {
      type: _.warning,
      message: "Something went wrong, Please reload the page or contact our administrator if the problem persist"
    }
  ) : /* @__PURE__ */ t.createElement("form", { className: "stripe-form", onSubmit: w }, /* @__PURE__ */ t.createElement("div", { className: "stripe-form-row" }, /* @__PURE__ */ t.createElement("label", null, "Card number", /* @__PURE__ */ t.createElement(b, { options: c, onChange: x }))), /* @__PURE__ */ t.createElement("div", { className: "stripe-form-row" }, /* @__PURE__ */ t.createElement("div", { className: "stripe-form-col" }, /* @__PURE__ */ t.createElement("label", null, "Expiration date", /* @__PURE__ */ t.createElement(F, { options: c, onChange: S }))), /* @__PURE__ */ t.createElement("div", { className: "stripe-form-col" }, /* @__PURE__ */ t.createElement("label", null, "CVC", /* @__PURE__ */ t.createElement(G, { options: c, onChange: I })))), /* @__PURE__ */ t.createElement(A, { type: "submit", buttonStyle: L.PRIMARY, buttonType: V.FLAT, disabled: y || !C() }, y ? "Processing..." : "Pay"));
}, Q = (a) => /* @__PURE__ */ t.createElement(B, null, ({ stripe: n, elements: s }) => /* @__PURE__ */ t.createElement(O, { stripe: n, elements: s, ...a }));
export {
  H as StripePaymentType,
  Q as default
};
