import { jsxs as d, Fragment as p, jsx as e } from "react/jsx-runtime";
import o from "prop-types";
import { Box as t, Divider as C } from "@mui/material";
import { LOGIN_PROVIDER as u } from "@arcblock/ux/lib/Util/constant";
import { checkSameProtocol as k, getWebWalletUrl as W } from "@arcblock/ux/lib/Util/wallet";
import { detectWalletExtension as q } from "@arcblock/ux/lib/Util";
import { useCreation as j } from "ahooks";
import { useBrowser as T } from "@arcblock/react-hooks";
import P from "./mobile-login-item.js";
import v from "./web-login-item.js";
import B from "../back-button.js";
import { useStateContext as E } from "../../contexts/state.js";
function I({
  qrcode: b,
  tokenState: r,
  webWalletUrl: n = W(),
  size: l = "small",
  disableSwitchApp: m = !1,
  tokenKey: x,
  walletLoginRef: g = null,
  webLoginRef: h = null,
  onMobileLoginClick: L,
  onWebLoginClick: w,
  onBack: s
}) {
  const { t: a, locale: y } = E(), i = T(), R = k(n), c = q(), f = j(() => i.mobile.tablet || !i.mobile.any && window?.navigator?.maxTouchPoints > 0, [i.mobile.tablet, i.mobile.any]);
  return /* @__PURE__ */ d(p, { children: [
    b,
    /* @__PURE__ */ d(t, { sx: { width: "100%", display: "flex", flexDirection: "column", gap: 1.5 }, children: [
      /* @__PURE__ */ e(t, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
        C,
        {
          orientation: "horizontal",
          sx: {
            fontSize: 12,
            color: "text.hint",
            "&::before, &::after": {
              borderColor: "divider"
            }
          },
          children: "or"
        }
      ) }),
      /* @__PURE__ */ e(
        t,
        {
          sx: {
            width: "100%",
            ".arc-login-item": {
              width: "100%",
              justifyContent: "center",
              "& > .arc-login-item__body": {
                flex: "unset"
              },
              "& > .other-item-icon": {
                display: "none !important"
              }
            }
          },
          children: f ? /* @__PURE__ */ e(
            P,
            {
              t: a,
              ref: g,
              tokenState: r,
              isTablet: f,
              sx: [l === "small" ? { p: 1 } : { p: 2 }],
              locale: y,
              tokenKey: x,
              disableSwitchApp: m,
              onClick: L
            },
            u.WALLET
          ) : (
            // eslint-disable-next-line react/jsx-no-useless-fragment
            /* @__PURE__ */ e(p, { children: (R || c) && (!i.mobile.any || c) ? /* @__PURE__ */ e(
              v,
              {
                t: a,
                ref: h,
                tokenState: r,
                webWalletUrl: n,
                sx: [l === "small" ? { p: 1 } : { p: 2 }],
                disableSwitchApp: m,
                onClick: w
              },
              u.WALLET
            ) : null })
          )
        }
      ),
      s && /* @__PURE__ */ e(B, { variant: "text", onClick: s })
    ] })
  ] });
}
I.propTypes = {
  qrcode: o.node.isRequired,
  tokenState: o.object.isRequired,
  webWalletUrl: o.string,
  size: o.oneOf(["small", "normal", "large"]),
  disableSwitchApp: o.bool,
  tokenKey: o.string.isRequired,
  walletLoginRef: o.object,
  webLoginRef: o.object,
  onMobileLoginClick: o.func.isRequired,
  onWebLoginClick: o.func.isRequired,
  onBack: o.func.isRequired
};
export {
  I as default
};
