import { jsx as e, jsxs as N } from "react/jsx-runtime";
import { memo as F, createElement as E, useState as H, useRef as I } from "react";
import { Backdrop as K, useMediaQuery as Q, useTheme as U, Box as c, Drawer as V, SwipeableDrawer as q, Dialog as J, DialogContent as X } from "@mui/material";
import { useDebounce as Y, useMemoizedFn as v } from "ahooks";
import { useBrowser as Z } from "@arcblock/react-hooks";
import oo from "color-convert";
import "../Theme/theme.js";
import "../Theme/theme-provider.js";
import { mergeSx as eo } from "../Util/style.js";
import { hexToRgba as d } from "../Util/index.js";
const P = F(({ ref: i, ...m }) => /* @__PURE__ */ E(
  K,
  {
    open: !0,
    ref: i,
    style: {
      backgroundColor: "rgba(0, 0, 0, 0.6)",
      backdropFilter: "blur(3px)",
      touchAction: "none"
    },
    ...m,
    key: "background"
  }
));
function xo(i) {
  function m({
    popup: y = !1,
    open: D = !1,
    hideCloseButton: h = !1,
    ...s
  }) {
    const [t, x] = H("#fff"), b = I(null), L = Z(), B = Q("(max-width:640px)");
    let r = "page";
    y && (r = "dialog", B && L.mobile.any && (r = "drawer"));
    const _ = U(), p = D, z = _?.transitions?.duration?.leavingScreen || 500, M = Y(p, {
      wait: z
    }), 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, n) => {
      ["backdropClick", "escapeKeyDown"].includes(n) || (w(), s?.onClose());
    }, C = M || p, T = h ? V : q, A = oo.hex.hsl(t), [$, R, a] = A, u = [0, 30, 60, 30, 0, 30, 60, 30], j = Math.max(...u), O = Math.min(...u);
    let g = !1;
    (a * (100 + j) / 100 > 100 || a * (100 + O) / 100 < 0) && (g = !0);
    const W = `linear-gradient(45deg, ${u.map((o) => {
      let n = a * (100 + o) / 100, l = 0.6;
      return g ? l = 0.5 * (100 + o) / 100 : n = a * (100 + o) / 100, `hsla(${$}, ${R}%, ${n}%, ${l})`;
    }).join(", ")})`, G = `linear-gradient(45deg, ${u.map((o) => {
      let n = a * (100 + o) / 100, l = 0.2;
      return g ? l = 0.3 * (100 + o) / 100 : n = a * (100 + o) / 100, `hsla(${$}, ${R}%, ${n}%, ${l})`;
    }).join(", ")})`, S = {
      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"
        }
      }
    }, f = v(() => {
      w(), s?.onClose?.();
    });
    return r === "page" ? /* @__PURE__ */ e(
      c,
      {
        className: "did-connect__container-page",
        sx: eo(S, {
          borderRadius: 1,
          position: "relative",
          zIndex: 1
        }),
        children: /* @__PURE__ */ e(
          c,
          {
            sx: {
              border: `1px solid ${d(t, 0.1)}`,
              m: "-1px",
              position: "relative",
              borderRadius: "12px",
              zIndex: 2,
              overflow: "hidden"
            },
            children: /* @__PURE__ */ e(i, { ...s, onClose: f, setColor: x, hideCloseButton: !0, mode: r })
          }
        )
      }
    ) : r === "drawer" ? /* @__PURE__ */ N(
      T,
      {
        className: "did-connect__container-drawer",
        disableSwipeToOpen: !0,
        open: p,
        anchor: "bottom",
        drawerDragger: b.current,
        onClose: k,
        slots: {
          backdrop: P
        },
        PaperProps: {
          sx: {
            borderRadius: 3,
            // 保持跟 DID Wallet 一致
            borderBottomLeftRadius: 0,
            borderBottomRightRadius: 0,
            p: "2px",
            animation: "glowBreathe 7s linear infinite",
            ".did-connect__root": {
              backgroundColor: "transparent"
            },
            overflow: "hidden",
            "@keyframes glowBreathe": {
              "0%, 100%": {
                boxShadow: `
                      inset 0 0 7px ${d(t, 0.3)},
                      inset 0 0 12px ${d(t, 0.3)}`
              },
              "50%": {
                boxShadow: `
                      inset 0 0 18px ${d(t, 0.7)},
                      inset 0 0 24px ${d(t, 0.5)}`
              }
            }
          }
        },
        children: [
          h ? null : /* @__PURE__ */ e(
            c,
            {
              ref: b,
              sx: {
                px: 1,
                pt: 2,
                m: "auto",
                mt: -1,
                mb: -2,
                zIndex: 2
              },
              children: /* @__PURE__ */ e(
                c,
                {
                  sx: {
                    width: "48px",
                    height: "4px",
                    borderRadius: "100vw",
                    backgroundColor: "rgba(0, 0, 0, 0.2)"
                  }
                }
              )
            }
          ),
          /* @__PURE__ */ e(
            c,
            {
              sx: {
                touchAction: "none",
                maxWidth: "100%",
                width: 500,
                height: "auto"
              },
              children: C ? /* @__PURE__ */ e(i, { ...s, onClose: f, setColor: x, hideCloseButton: !0, mode: r }) : null
            }
          )
        ]
      }
    ) : /* @__PURE__ */ e(
      J,
      {
        open: p,
        slots: {
          backdrop: P
        },
        className: "did-connect__container-dialog",
        onClose: k,
        PaperProps: {
          sx: {
            // 避免样式被 server 中的定义覆盖
            "&.MuiPaper-rounded": {
              borderRadius: "12px !important"
            },
            position: "relative",
            ...S
          }
        },
        children: /* @__PURE__ */ e(
          X,
          {
            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(
              i,
              {
                ...s,
                onClose: f,
                setColor: x,
                hideCloseButton: h,
                mode: r
              }
            ) : null
          }
        )
      }
    );
  }
  return m;
}
export {
  xo as default
};
