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