import { jsxs as s, jsx as r, Fragment as W } from "react/jsx-runtime";
import { useRef as z, useEffect as j } from "react";
import { useMemoizedFn as n, useCreation as T, useReactive as _ } from "ahooks";
import f from "@arcblock/bridge";
import { Box as S, IconButton as H, Popper as N, ClickAwayListener as Q, Fade as V, Paper as q, Divider as k, MenuList as G, MenuItem as J } from "@mui/material";
import { Icon as K } from "@iconify/react";
import X from "@iconify-icons/material-symbols/person-outline-rounded";
import Y from "@iconify-icons/material-symbols/filter-vintage-outline-rounded";
import Z from "@iconify-icons/material-symbols/account-circle-off-outline-rounded";
import $ from "@iconify-icons/material-symbols/featured-seasonal-and-gifts-rounded";
import ee from "copy-to-clipboard";
import h from "lodash/noop";
import re from "../../Toast/index.js";
import te from "../../Avatar/index.js";
import { getUserAvatar as oe } from "../../Util/index.js";
import ie from "./user-info.js";
import { DASHBOARD_URL as ne, PROFILE_URL as ce } from "../../Util/constant.js";
import ae from "../../SessionPermission/index.js";
import { translations as le } from "../libs/translation.js";
import { translate as se } from "../../Locale/util.js";
import pe from "./did-space.js";
import { mergeSx as ue } from "../../Util/style.js";
import { createDebug as de } from "../../Util/logger.js";
const me = (e) => {
  const c = new URL(window.location.href);
  return c.searchParams.set("inviter", e), c.toString();
}, g = de("did-connect");
function We({
  session: e,
  onBindWallet: c = h,
  isBlocklet: a = !0,
  locale: u = "en",
  size: b = 24,
  popperType: I = "click",
  sx: y,
  ...R
}) {
  const l = n((t, o = {}) => se(le, t, u, "en", o)), C = T(() => !!globalThis?.blocklet?.settings?.invite?.enabled, []), P = z(null), d = _({
    open: !1
  }), i = n((t = !d.open) => {
    d.open = t;
  }), B = I === "hover" ? { onMouseEnter: () => i(!0), onMouseLeave: () => i(!1) } : { onClick: () => i() }, D = oe(e.user?.avatar?.replace(/\s/g, encodeURIComponent(" "))), L = e.useOAuth(), O = typeof e.usePasskey == "function" ? e.usePasskey() : null, v = n(({ inArcSphere: t = !1 } = {}) => {
    const o = {};
    t && e?.user?.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e?.user?.sourceProvider === "passkey" ? O.switchPassport(e.user) : ["google", "apple", "email", "github"].includes(e?.user?.sourceProvider) ? L.switchOAuthPassport(e.user) : e.switchPassport(h, o);
  }), x = n(({ userSession: t, inArcSphere: o = !1 } = {}) => new Promise((F) => {
    const A = {};
    o && e.user.sourceAppPid && (A.sourceAppPid = e.user.sourceAppPid);
    const m = {};
    t ? m.userSession = t : (i(!1), m.showQuickConnect = !1), e.switchDid(
      () => {
        i(!1), F();
      },
      A,
      m
    );
  })), w = n(({ inArcSphere: t = !1 } = {}) => {
    const o = {};
    t && e.user.sourceAppPid && (o.sourceAppPid = e.user.sourceAppPid), i(!1), e.switchProfile(h, o);
  }), M = n(() => {
    i(!1), e.logout();
  }), E = n(() => {
    i(!1), e.bindWallet(c);
  }), U = n(() => {
    i(!1);
    const t = me(e.user.did);
    ee(t), re.success(l("inviteCopied"));
  });
  return j(() => {
    f.registerBlocklet("callSwitchPassport", () => {
      g("bridge registerBlocklet: callSwitchPassport"), v({ inArcSphere: !0 });
    }), f.registerBlocklet("callSwitchDid", () => {
      g("bridge registerBlocklet: callSwitchDid"), x({ inArcSphere: !0 });
    }), f.registerBlocklet("callSwitchProfile", () => {
      g("bridge registerBlocklet: callSwitchProfile"), w({ inArcSphere: !0 });
    });
  }, []), /* @__PURE__ */ s(
    S,
    {
      sx: ue(
        {
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center"
        },
        // @ts-ignore
        y
      ),
      ...R,
      children: [
        /* @__PURE__ */ r(
          H,
          {
            ref: P,
            size: "medium",
            "data-cy": "sessionManager-logout-popup",
            className: "arc-session-user-logged-in",
            "aria-label": "User info button",
            ...B,
            children: /* @__PURE__ */ r(te, { variant: "circle", did: e.user.did, src: D, size: b, shape: "circle" })
          }
        ),
        /* @__PURE__ */ r(
          N,
          {
            open: d.open,
            anchorEl: P.current,
            transition: !0,
            placement: "bottom-end",
            sx: {
              zIndex: 1600
            },
            children: ({ TransitionProps: t }) => /* @__PURE__ */ r(
              Q,
              {
                onClickAway: (o) => {
                  o.preventDefault(), o.stopPropagation(), i(!1);
                },
                children: /* @__PURE__ */ r(V, { ...t, timeout: 350, children: /* @__PURE__ */ s(
                  q,
                  {
                    variant: "outlined",
                    sx: {
                      borderRadius: 1.5,
                      width: 350,
                      maxWidth: "90vw"
                    },
                    children: [
                      /* @__PURE__ */ r(
                        ie,
                        {
                          locale: u,
                          isBlocklet: a,
                          session: e,
                          onSwitchPassport: v,
                          onSwitchAccount: x,
                          onSwitchProfile: w,
                          onBindWallet: E
                        }
                      ),
                      /* @__PURE__ */ r(k, { sx: { m: "0 !important" } }),
                      /* @__PURE__ */ s(G, { sx: { p: 0 }, children: [
                        a ? /* @__PURE__ */ s(W, { children: [
                          /* @__PURE__ */ r(ae, { session: e, children: /* @__PURE__ */ r(
                            p,
                            {
                              icon: Y,
                              title: l("dashboard"),
                              component: "a",
                              href: ne,
                              sx: { display: "block", textDecoration: "none", color: "inherit" }
                            }
                          ) }),
                          /* @__PURE__ */ r(
                            p,
                            {
                              icon: X,
                              title: l("profile"),
                              component: "a",
                              href: ce,
                              sx: { display: "block", textDecoration: "none", color: "inherit" }
                            }
                          ),
                          C && /* @__PURE__ */ r(
                            p,
                            {
                              icon: $,
                              title: l("invite"),
                              component: "div",
                              onClick: U,
                              sx: { display: "block", color: "inherit" }
                            }
                          ),
                          /* @__PURE__ */ r(k, { sx: { m: "0 !important" } }),
                          /* @__PURE__ */ r(pe, { session: e, locale: u })
                        ] }) : null,
                        /* @__PURE__ */ r(
                          p,
                          {
                            icon: Z,
                            title: l("logout"),
                            component: "div",
                            sx: { color: "error.main" },
                            onClick: M,
                            "data-cy": "sessionManager-logout-trigger"
                          }
                        )
                      ] })
                    ]
                  }
                ) })
              }
            )
          }
        )
      ]
    }
  );
}
function p({
  icon: e,
  title: c,
  ...a
}) {
  return /* @__PURE__ */ r(S, { ...a, sx: { p: 0.5, ...a?.sx }, children: /* @__PURE__ */ s(
    J,
    {
      sx: {
        display: "flex",
        gap: 1,
        alignItems: "center",
        borderRadius: 1,
        "&:hover": {
          backgroundColor: "action.hover"
        },
        py: 1
      },
      children: [
        /* @__PURE__ */ r(K, { icon: e, fontSize: 24 }),
        c
      ]
    }
  ) });
}
export {
  We as default
};
