import { Alert as P } from "./accelbyte-widgets123.mjs";
import { CommonError as p } from "./accelbyte-widgets124.mjs";
import { CommonError as g } from "./accelbyte-widgets204.mjs";
import { Loading as f } from "./accelbyte-widgets136.mjs";
import { Ctx as i } from "./accelbyte-widgets33.mjs";
import { AlertType as d } from "./accelbyte-widgets128.mjs";
import { EcommerceErrorCode as A, PaymentAccountType as u } from "./accelbyte-widgets185.mjs";
import { ErrorHelper as M } from "./accelbyte-widgets120.mjs";
import e from "react";
import { Trans as r } from "react-i18next";
import { AccountMainSection as S, AccountMainSectionHeader as D, AccountMainSectionBody as b } from "./accelbyte-widgets122.mjs";
import { SkeletonCard as C } from "./accelbyte-widgets278.mjs";
import { DeletePaymentDialog as N } from "./accelbyte-widgets279.mjs";
import "./accelbyte-widgets280.mjs";
import { mockUserPaymentMethods as T } from "./accelbyte-widgets209.mjs";
const v = (a) => {
  switch (a) {
    case u.enum.card:
      return "Card";
    case u.enum.paypal:
      return "Paypal";
    default:
      return "Unknown";
  }
}, w = (a) => a.type === u.enum.card ? `**** **** **** ${a.name.slice(-4)}` : a.name;
class V extends e.Component {
  constructor(c) {
    super(c), this.fetchPaymentAccounts = () => {
      const { user: t } = i.getUserManager().state;
      t && this.logic.getPaymentAccounts(t.userId).then(() => {
        const { error: n } = this.logic.state;
        n && this.onFetchError(n);
      }).finally(() => this.setState({ isLoading: !1 }));
    }, this.onFetchError = (t) => {
      this.setState({
        alert: {
          type: d.danger,
          element: /* @__PURE__ */ e.createElement(p, { error: t })
        }
      });
    }, this.onDeleteSuccess = () => {
      this.setState({
        alert: {
          type: d.success,
          element: /* @__PURE__ */ e.createElement(r, { i18nKey: "PaymentMethodsPage.deleteSuccess" }, "The selected payment method has been deleted.")
        }
      });
    }, this.onDeleteError = (t) => {
      this.setState({
        alert: {
          type: d.danger,
          element: /* @__PURE__ */ e.createElement(p, { error: t })
        }
      });
    }, this.deletePaymentMethod = async () => {
      const { deletePaymentAccount: t } = this.state, { user: n } = i.getUserManager().state;
      if (!t || !n)
        return;
      await this.logic.delete(n.userId, t);
      const { deleteError: s, deleteSuccess: m } = this.logic.state;
      s && this.onDeleteError(s), m && (this.onDeleteSuccess(), await this.setState({ deletePaymentAccount: null }), await this.fetchPaymentAccounts());
    }, this.shouldRedirect = () => {
      var n;
      const { error: t } = this.logic.state;
      return M.isAxiosError(t) && ((n = t == null ? void 0 : t.response) == null ? void 0 : n.data.errorCode) === A.PAYMENT_METHOD_SAVING_UNSUPPORTED;
    }, this.logic = i.getAppState().paymentMethodManager, this.logic.subscribe(() => this.setState({})), this.state = {
      deletePaymentAccount: null,
      alert: null,
      isLoading: !0
    };
  }
  componentDidMount() {
    if (this.props.isPreviewMode)
      return this.setState({ isLoading: !1 });
    this.fetchPaymentAccounts();
  }
  render() {
    const { deletePaymentAccount: c, alert: t, isLoading: n } = this.state, { isFetching: s, paymentAccounts: m, isDeleting: h, error: E } = this.logic.state, y = this.props.isPreviewMode, o = y ? T : m;
    return this.shouldRedirect() ? /* @__PURE__ */ e.createElement(g, { error: E }) : n ? /* @__PURE__ */ e.createElement(C, null) : /* @__PURE__ */ e.createElement(S, { className: "paymentMethodsPage" }, /* @__PURE__ */ e.createElement(D, null, /* @__PURE__ */ e.createElement(r, { i18nKey: "PaymentMethodsPage.title" }, "Payment Methods")), /* @__PURE__ */ e.createElement(b, null, t && /* @__PURE__ */ e.createElement(
      P,
      {
        type: t.type,
        className: "alert",
        onDismiss: () => {
          this.setState({ alert: null });
        }
      },
      t.element
    ), s && /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(r, { i18nKey: "PaymentMethodsPage.loading.message" }, "Loading your saved payment methods...")), o && /* @__PURE__ */ e.createElement("div", { className: "paymentAccountsTable" }, o.length > 0 && /* @__PURE__ */ e.createElement("table", null, /* @__PURE__ */ e.createElement("thead", null, /* @__PURE__ */ e.createElement("tr", null, /* @__PURE__ */ e.createElement("th", null, /* @__PURE__ */ e.createElement(r, { i18nKey: "PaymentMethodPage.paymentAccounts.type" }, "Payment Type")), /* @__PURE__ */ e.createElement("th", { className: "left name" }), /* @__PURE__ */ e.createElement("th", null))), /* @__PURE__ */ e.createElement("tbody", null, o.map((l) => /* @__PURE__ */ e.createElement("tr", { key: `${l.id}` }, /* @__PURE__ */ e.createElement("td", null, v(l.type)), /* @__PURE__ */ e.createElement("td", { className: "name" }, w(l)), /* @__PURE__ */ e.createElement("td", null, /* @__PURE__ */ e.createElement(
      "button",
      {
        disabled: h,
        onClick: y ? void 0 : () => this.setState({ deletePaymentAccount: l })
      },
      /* @__PURE__ */ e.createElement(r, { i18nKey: "PaymentMethodPage.delete.button" }, "Delete")
    )))))), c && /* @__PURE__ */ e.createElement(
      N,
      {
        isDeleting: h,
        onClose: () => this.setState({ deletePaymentAccount: null }),
        onDelete: this.deletePaymentMethod
      }
    ), !o.length && /* @__PURE__ */ e.createElement("div", { className: "noData" }, /* @__PURE__ */ e.createElement(r, { i18nKey: "PaymentMethodPage.paymentAccounts.noData" }, "You have no payment methods saved")))));
  }
}
export {
  v as createReadablePaymentAccountType,
  w as createReadablePaymentName,
  V as default
};
