import { jsx as e, jsxs as F } from "react/jsx-runtime";
import { memo as I, createElement as E, useState as H, useRef as K } from "react";
import { Backdrop as Q, useMediaQuery as U, useTheme as V, Box as d, Drawer as q, SwipeableDrawer as J, Dialog as X, DialogContent as Y } from "@mui/material";
import { useDebounce as Z, useMemoizedFn as v } from "ahooks";
import { useBrowser as oo } from "@arcblock/react-hooks";
import eo from "color-convert";
import "../Theme/theme.js";
import "../Theme/theme-provider.js";
import { mergeSx as no } from "../Util/style.js";
import { hexToRgba as c } from "../Util/index.js";
const D = I(({ ref: s, ...m }) => /* @__PURE__ */ E(
  Q,
  {
    open: !0,
    ref: s,
    style: {
      backgroundColor: "rgba(0, 0, 0, 0.6)",
      backdropFilter: "blur(3px)",
      touchAction: "none"
    },
    ...m,
    key: "background"
  }
));
function xo(s) {
  function m({
    popup: y = !1,
    open: P = !1,
    hideCloseButton: h = !1,
    ...n
  }) {
    const [a, g] = H("#fff"), f = K(null), B = oo(), L = U("(max-width:640px)");
    let r = "page";
    y && (r = "dialog", L && B.mobile.any && (r = "drawer"));
    const z = V(), p = P, _ = z?.transitions?.duration?.leavingScreen || 500, M = Z(p, {
      wait: _
    }), w = v(() => {
      const o = new URLSearchParams(window.location.search);
      o.get("magicToken") && o.delete("magicToken"), o.toString() && window.history.replaceState({}, "", `${window.location.pathname}?${o.toString()}`);
    }), k = (o, t) => {
      ["backdropClick", "escapeKeyDown"].includes(t) || (w(), n?.onClose());
    }, C = M || p, T = h ? q : J, A = eo.hex.hsl(a), [S, $, i] = A, u = [0, 30, 60, 30, 0, 30, 60, 30], j = Math.max(...u), O = Math.min(...u);
    let x = !1;
    (i * (100 + j) / 100 > 100 || i * (100 + O) / 100 < 0) && (x = !0);
    const W = `linear-gradient(45deg, ${u.map((o) => {
      let t = i * (100 + o) / 100, l = 0.6;
      return x ? l = 0.5 * (100 + o) / 100 : t = i * (100 + o) / 100, `hsla(${S}, ${$}%, ${t}%, ${l})`;
    }).join(", ")})`, G = `linear-gradient(45deg, ${u.map((o) => {
      let t = i * (100 + o) / 100, l = 0.2;
      return x ? l = 0.3 * (100 + o) / 100 : t = i * (100 + o) / 100, `hsla(${S}, ${$}%, ${t}%, ${l})`;
    }).join(", ")})`, R = n.blocklet?.settings?.didConnect?.showDidColor === !1 ? {} : {
      overflow: "visible",
      "&::before, &::after": {
        content: '""',
        position: "absolute",
        top: "-3px",
        right: "-3px",
        bottom: "-3px",
        left: "-3px",
        background: W,
        backgroundSize: "300% 300%",
        backgroundRepeat: "no-repeat",
        animation: "glowRotate 10s linear infinite",
        borderRadius: "14px !important",
        zIndex: 0
      },
      "&::after": {
        background: G,
        filter: "blur(15px)"
      },
      "@keyframes glowRotate": {
        "0%": {
          backgroundPosition: "0 0"
        },
        "50%": {
          backgroundPosition: "100% 0"
        },
        "100%": {
          backgroundPosition: "0 0"
        }
      }
    }, N = n.blocklet?.settings?.didConnect?.showDidColor === !1 ? {} : {
      animation: "glowBreathe 7s linear infinite",
      ".did-connect__root": {
        backgroundColor: "transparent"
      },
      overflow: "hidden",
      "@keyframes glowBreathe": {
        "0%, 100%": {
          boxShadow: `
            inset 0 0 7px ${c(a, 0.3)},
            inset 0 0 12px ${c(a, 0.3)}`
        },
        "50%": {
          boxShadow: `
            inset 0 0 18px ${c(a, 0.7)},
            inset 0 0 24px ${c(a, 0.5)}`
        }
      }
    }, b = v(() => {
      w(), n?.onClose?.();
    });
    return r === "page" ? /* @__PURE__ */ e(
      d,
      {
        className: "did-connect__container-page",
        sx: no(R, {
          borderRadius: 1,
          position: "relative",
          zIndex: 1
        }),
        children: /* @__PURE__ */ e(
          d,
          {
            sx: {
              border: `1px solid ${c(a, 0.1)}`,
              m: "-1px",
              position: "relative",
              borderRadius: "12px",
              zIndex: 2,
              overflow: "hidden"
            },
            children: /* @__PURE__ */ e(s, { ...n, onClose: b, setColor: g, hideCloseButton: !0, mode: r })
          }
        )
      }
    ) : r === "drawer" ? /* @__PURE__ */ F(
      T,
      {
        className: "did-connect__container-drawer",
        disableSwipeToOpen: !0,
        open: p,
        anchor: "bottom",
        drawerDragger: f.current,
        onClose: k,
        slots: {
          backdrop: D
        },
        sx: {
          zIndex: "1400 !important"
          // dialog 的默认 z-index 是 1300，在 dialog 中打开验证/登录时会被遮挡，这里强制设置为 1400，确保 Drawer 在最上层
        },
        slotProps: {
          paper: {
            sx: {
              backgroundColor: "background.default",
              borderRadius: 3,
              // 保持跟 DID Wallet 一致
              borderBottomLeftRadius: 0,
              borderBottomRightRadius: 0,
              p: "2px",
              ...N
            }
          }
        },
        children: [
          h ? null : /* @__PURE__ */ e(
            d,
            {
              ref: f,
              sx: {
                px: 1,
                pt: 2,
                m: "auto",
                mt: -1,
                mb: -2,
                zIndex: 2
              },
              children: /* @__PURE__ */ e(
                d,
                {
                  sx: {
                    width: "48px",
                    height: "4px",
                    borderRadius: "100vw",
                    backgroundColor: "rgba(0, 0, 0, 0.2)"
                  }
                }
              )
            }
          ),
          /* @__PURE__ */ e(
            d,
            {
              sx: {
                touchAction: "none",
                maxWidth: "100%",
                width: 500,
                height: "auto"
              },
              children: C ? /* @__PURE__ */ e(s, { ...n, onClose: b, setColor: g, hideCloseButton: !0, mode: r }) : null
            }
          )
        ]
      }
    ) : /* @__PURE__ */ e(
      X,
      {
        open: p,
        slots: {
          backdrop: D
        },
        className: "did-connect__container-dialog",
        onClose: k,
        PaperProps: {
          sx: {
            // 避免样式被 server 中的定义覆盖
            "&.MuiPaper-rounded": {
              borderRadius: "12px !important"
            },
            position: "relative",
            ...R
          }
        },
        children: /* @__PURE__ */ e(
          Y,
          {
            sx: {
              maxWidth: "calc(100vw - 18px)",
              maxHeight: "calc(100vh - 18px)",
              p: "0px !important",
              height: "auto",
              backgroundColor: "background.default",
              borderRadius: "12px !important",
              zIndex: 1
            },
            children: C ? /* @__PURE__ */ e(
              s,
              {
                ...n,
                onClose: b,
                setColor: g,
                hideCloseButton: h,
                mode: r
              }
            ) : null
          }
        )
      }
    );
  }
  return m;
}
export {
  xo as default
};
