"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import { useState, useContext, useMemo } from "react";
import { Flex, Box } from "theme-ui";
import Arrow from "../../icons-legacy/Arrow.js";
import { GraphAccount } from "../../molecules/GraphAccount/GraphAccount.js";
import { useBreakpointIndex } from "../../theme/useBreakpointIndex.js";
import { useTheme } from "../../theme/useTheme.js";
import { GDSContext } from "../../theme/GDSContext.js";
import { useOutsideAlerter } from "../../hooks/useOutsideAlerter.js";
import { FontWeight } from "../../tokens/FontWeight.js";
import { FontFamily } from "../../tokens/FontFamily.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
import { FontSize } from "../../tokens/FontSize.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Tag } from "../../atoms/Tag/Tag.js";
import { Opacity } from "../../tokens/Opacity.js";
import { Button } from "../../molecules/Button/Button.js";
const UserProfile = ({
  position = {},
  profileUrl,
  profileUrlAs,
  activeRoute,
  onConnect,
  userDropDownMenu,
  ethereumAccount,
  graphAccount,
  ens,
  accountTag
}) => {
  const [navOpen, setNavOpen] = useState(false);
  const authenticated = ethereumAccount !== "";
  const isSmallScreen = useBreakpointIndex() < 3;
  const { theme } = useTheme();
  const { clientLink: ClientLink } = useContext(GDSContext);
  const outsideAlerter = useOutsideAlerter(() => setNavOpen(false));
  const GraphAccountMemo = useMemo(
    () => /* @__PURE__ */ jsx(
      GraphAccount,
      {
        ethereumAccount,
        showPill: (activeRoute == null ? void 0 : activeRoute.includes("profile")) || (activeRoute == null ? void 0 : activeRoute.includes("settings")),
        graphAccount,
        showAddress: !isSmallScreen,
        size: 24,
        ens
      }
    ),
    [ethereumAccount, activeRoute, graphAccount, isSmallScreen, ens]
  );
  const MobileDropdownPill = () => /* @__PURE__ */ jsxs(
    Flex,
    {
      sx: {
        borderRadius: BorderRadius.FULL,
        border: "White4",
        bg: "White4"
      },
      children: [
        GraphAccountMemo,
        /* @__PURE__ */ jsx(Box, { sx: { ml: "-20px", svg: { opacity: Opacity["64%"], width: "32px", height: "32px" } }, children: /* @__PURE__ */ jsx(Arrow, { direction: navOpen ? "up" : "down" }) })
      ]
    }
  );
  return /* @__PURE__ */ jsxs(Flex, { ...outsideAlerter, className: "sign-in-area", sx: { "> * + *": { ml: ".5rem" } }, children: [
    authenticated && !isSmallScreen ? /* @__PURE__ */ jsxs(
      ClientLink,
      {
        legacyBehavior: false,
        href: profileUrl,
        as: profileUrlAs,
        passHref: true,
        className: "user-area",
        sx: {
          display: "flex",
          alignItems: "center",
          fontSize: FontSize["14px"],
          color: "White64",
          borderRadius: BorderRadius.FULL,
          border: "White4",
          bg: "White4",
          fontFamily: FontFamily.DEFAULT,
          fontWeight: FontWeight.MEDIUM,
          letterSpacing: "0.4px",
          cursor: "pointer",
          textDecoration: "none",
          "&:hover": {
            color: "#FFFFFF",
            textShadow: "0 0 64px rgba(111,76,255,0.64)",
            textDecoration: "none"
          }
        },
        children: [
          GraphAccountMemo,
          accountTag ? /* @__PURE__ */ jsx(Tag, { color: "Purple", sx: { mr: Spacing["8px"] }, children: accountTag }) : null
        ]
      }
    ) : null,
    authenticated ? /* @__PURE__ */ jsxs(
      "div",
      {
        onClick: (event) => {
          event.stopPropagation();
          setNavOpen(!navOpen);
        },
        className: "user-area",
        sx: {
          cursor: "pointer",
          display: "flex",
          alignItems: "center",
          fontSize: "14px",
          ".nav-menu-button": { display: "grid" }
        },
        children: [
          isSmallScreen ? /* @__PURE__ */ jsx(MobileDropdownPill, {}) : /* @__PURE__ */ jsx(
            "div",
            {
              sx: {
                borderRadius: BorderRadius.FULL,
                overflow: "hidden",
                width: "32px",
                "*": {
                  height: "100%"
                }
              },
              children: /* @__PURE__ */ jsx("div", { sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
                "div",
                {
                  className: "nav-menu-button",
                  sx: {
                    display: "grid",
                    borderRadius: BorderRadius.FULL,
                    border: "White4",
                    bg: "White4",
                    color: "white",
                    marginRight: "1rem",
                    placeItems: "center",
                    cursor: "pointer",
                    width: "100%",
                    height: "100%"
                  },
                  children: /* @__PURE__ */ jsx(Arrow, { fill: theme.colors.White64, direction: navOpen ? "up" : "down" })
                }
              ) }) })
            }
          ),
          /* @__PURE__ */ jsx(
            "div",
            {
              sx: {
                display: navOpen ? "block" : "none",
                position: "absolute",
                right: ["-84px", null, "0px"],
                width: ["100vw", "inherit"],
                top: "calc(100% + 20px)",
                ...position
              },
              children: userDropDownMenu
            }
          )
        ]
      }
    ) : /* @__PURE__ */ jsx(ConnectButton, { onClick: () => void onConnect(), children: "Connect" })
  ] });
};
function ConnectButton(props) {
  return /* @__PURE__ */ jsx(
    Button.Secondary,
    {
      sx: {
        width: ["84px", null, null, "fit-content"],
        height: ["32px", null, null, "48px"],
        "& > button": { px: [0, null, null, "24px"] }
      },
      ...props
    }
  );
}
export {
  UserProfile
};
