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