import { Button as Q, ButtonStyle as X, ButtonType as Z } from "./accelbyte-widgets107.mjs";
import { Loading as ee } from "./accelbyte-widgets136.mjs";
import { AppUrlParamContext as re } from "./accelbyte-widgets574.mjs";
import { PaymentAlert as x } from "./accelbyte-widgets493.mjs";
import { PaymentDataContext as ae } from "./accelbyte-widgets576.mjs";
import { sendMessageToParentWindow as te, PAYMENT_STATION_ACTION as ne } from "./accelbyte-widgets496.mjs";
import { getTotalPrice as oe } from "./accelbyte-widgets497.mjs";
import { ConfigKeys as le } from "./accelbyte-widgets78.mjs";
import { Ctx as w } from "./accelbyte-widgets33.mjs";
import { AlertType as F } from "./accelbyte-widgets128.mjs";
import { Frames as I, CardNumber as ie, ExpiryDate as ce, Cvv as se } from "frames-react";
import { Platform as S } from "@accelbyte/sdk-platform";
import e, { useContext as A, useState as o, useEffect as L } from "react";
import me from "./accelbyte-widgets689.mjs";
import T from "./accelbyte-widgets690.mjs";
import de from "./accelbyte-widgets691.mjs";
import ue from "./accelbyte-widgets692.mjs";
import pe from "./accelbyte-widgets693.mjs";
import v from "./accelbyte-widgets694.mjs";
import ge from "./accelbyte-widgets695.mjs";
import fe from "./accelbyte-widgets696.mjs";
import ve from "./accelbyte-widgets697.mjs";
import Ee from "./accelbyte-widgets698.mjs";
import "./accelbyte-widgets699.mjs";
const Ge = ({ paymentOrderDetails: s, paymentProvider: k }) => {
  const E = w.getAppState().getSdk(), _ = w.getAppState().getConfig() || {}, { paymentOrderNo: M } = A(re), {
    paymentData: { tax: d, zipCode: V }
  } = A(ae), [i, u] = o({
    value: null,
    isLoading: !1,
    error: null
  }), [n, c] = o({
    value: null,
    isLoading: !1,
    error: null
  }), [b, D] = o(null), [y, z] = o(null), [C, K] = o(null), [h, R] = o(null), [$, B] = o(!1), [P, G] = o({
    base: "#FFFFFF",
    placeholder: "#3a3a3a"
  }), m = y !== null && !y, p = C !== null && !C, g = h !== null && !h, N = async () => {
    const { region: r, sandbox: a } = s;
    if (!i.isLoading) {
      u({ value: null, isLoading: !0, error: null });
      try {
        const l = await S.PaymentStationApi(E).getPaymentPublicconfig({
          paymentProvider: k,
          region: r || null,
          sandbox: a
        });
        if (!l.publicKey || typeof l.publicKey != "string")
          throw new Error("Invalid configuration");
        u({ value: l.publicKey, isLoading: !1, error: null });
      } catch (t) {
        console.error(t), u({ error: t, isLoading: !1, value: null });
      }
    }
  };
  L(() => {
    var t, l;
    N();
    const r = _[le.PAGE_CONFIG], a = (l = (t = r == null ? void 0 : r.data) == null ? void 0 : t.global) == null ? void 0 : l.colors;
    if (a) {
      const {
        text: { hex: J, rgb: f }
      } = a;
      G({ base: J, placeholder: `rgba(${f.r}, ${f.g}, ${f.b}, 0.65)` });
    }
  }, []);
  const O = ({ isValid: r, element: a, isEmpty: t }) => {
    switch (a) {
      case "card-number":
        z(t ? null : r);
        break;
      case "expiry-date":
        K(t ? null : r);
        break;
      case "cvv":
        R(t ? null : r);
        break;
    }
  }, U = ({ paymentMethod: r }) => {
    D(r);
  }, Y = ({ isValid: r }) => {
    B(r);
  }, H = () => {
    c({ value: null, isLoading: !0, error: null });
  }, W = async (r) => {
    if (!n.isLoading) {
      c({ value: null, isLoading: !0, error: null });
      try {
        const a = await S.PaymentStationApi(E).createPayPayment_ByPaymentOrderNo(
          M,
          { token: r.token },
          { zipCode: V }
        );
        if (!a.success)
          throw new Error(a.reason || "Cannot process payment");
        c({ value: a, isLoading: !1, error: null });
      } catch (a) {
        c({ error: a, value: null, isLoading: !1 });
      }
    }
  }, j = (r) => {
    c({ value: null, isLoading: !1, error: new Error(r.message) });
  };
  L(() => {
    n.value && n.value.success && te({ message: { action: ne.enum.complete } });
  }, [n.value]);
  const q = () => {
    if (b)
      switch (b) {
        case "Visa":
          return /* @__PURE__ */ e.createElement("img", { className: "icon-show", src: Ee, alt: "Visa" });
        case "Mastercard":
          return /* @__PURE__ */ e.createElement("img", { className: "icon-show", src: ve, alt: "Mastercard" });
        case "American Express":
          return /* @__PURE__ */ e.createElement("img", { className: "icon-show", src: me, alt: "American Express" });
        case "Diners Club":
          return /* @__PURE__ */ e.createElement("img", { className: "icon-show", src: pe, alt: "Diners Club" });
        default:
          return null;
      }
  };
  return i.error ? /* @__PURE__ */ e.createElement(
    x,
    {
      type: F.warning,
      onRetry: N,
      message: "Something went wrong, Please retry or contact our administrator if the problem persist"
    }
  ) : /* @__PURE__ */ e.createElement("div", { className: "checkout-com" }, i.isLoading && /* @__PURE__ */ e.createElement(ee, null), n.error && /* @__PURE__ */ e.createElement(
    x,
    {
      type: F.warning,
      message: "Something went wrong, Please reload the page or contact our administrator if the problem persist"
    }
  ), !!i.value && !n.error && /* @__PURE__ */ e.createElement("div", { className: "app", id: "payment-form" }, /* @__PURE__ */ e.createElement(
    I,
    {
      config: {
        debug: s.sandbox,
        publicKey: i.value,
        style: {
          base: {
            color: P.base,
            fontSize: "14px"
          },
          placeholder: {
            base: {
              color: P.placeholder
            }
          }
        }
      },
      frameValidationChanged: O,
      paymentMethodChanged: U,
      cardValidationChanged: Y,
      cardSubmitted: H,
      cardTokenized: W,
      cardTokenizationFailed: j
    },
    /* @__PURE__ */ e.createElement("div", { className: "field-container" }, /* @__PURE__ */ e.createElement("label", { htmlFor: "card-number" }, "Card number"), /* @__PURE__ */ e.createElement("div", { className: "input-container card-number" }, /* @__PURE__ */ e.createElement("div", { className: "icon-container" }, m ? /* @__PURE__ */ e.createElement("img", { id: "icon-card-number", src: T, alt: "PAN" }) : /* @__PURE__ */ e.createElement("img", { id: "icon-card-number", src: de, alt: "PAN" })), /* @__PURE__ */ e.createElement(ie, null), /* @__PURE__ */ e.createElement("div", { className: "icon-container" }, !m && q(), /* @__PURE__ */ e.createElement("img", { className: m ? "icon-show" : "icon-hide", src: v, alt: "error icon" }))), m && /* @__PURE__ */ e.createElement("div", { className: "error-message error-message__card-number" }, "Invalid card number")),
    /* @__PURE__ */ e.createElement("div", { className: "date-and-code field-container" }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("label", { htmlFor: "expiry-date" }, "Expiry date"), /* @__PURE__ */ e.createElement("div", { className: "input-container expiry-date" }, /* @__PURE__ */ e.createElement("div", { className: "icon-container" }, p ? /* @__PURE__ */ e.createElement("img", { id: "icon-card-number", src: ge, alt: "Expiry date" }) : /* @__PURE__ */ e.createElement("img", { id: "icon-card-number", src: fe, alt: "Expiry date" })), /* @__PURE__ */ e.createElement(ce, null), /* @__PURE__ */ e.createElement("div", { className: "icon-container" }, /* @__PURE__ */ e.createElement("img", { className: p ? "icon-show" : "icon-hide", src: v, alt: "error-icon" }))), p && /* @__PURE__ */ e.createElement("span", { className: "error-message error-message__expiry-date" }, "Invalid expiry date")), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("label", { htmlFor: "cvv" }, "Security code"), /* @__PURE__ */ e.createElement("div", { className: "input-container cvv" }, /* @__PURE__ */ e.createElement("div", { className: "icon-container" }, g ? /* @__PURE__ */ e.createElement("img", { id: "icon-card-number", src: T, alt: "Expiry date" }) : /* @__PURE__ */ e.createElement("img", { id: "icon-card-number", src: ue, alt: "Expiry date" })), /* @__PURE__ */ e.createElement(se, null), /* @__PURE__ */ e.createElement("div", { className: "icon-container" }, /* @__PURE__ */ e.createElement("img", { className: g ? "icon-show" : "icon-hide", src: v, alt: "error icon" }))), g && /* @__PURE__ */ e.createElement("span", { className: "error-message error-message__cvv" }, "Invalid cvv code"))),
    /* @__PURE__ */ e.createElement(
      Q,
      {
        className: "pay-button",
        onClick: I.submitCard,
        buttonStyle: X.PRIMARY,
        buttonType: Z.FLAT,
        disabled: !$ || n.isLoading
      },
      n.isLoading ? "PROCESSING..." : `PAY ${s.currencySymbol}${oe(s.price, (d == null ? void 0 : d.formattedTax) || void 0)}`
    )
  )));
};
export {
  Ge as default
};
