"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { appendEth, addrShortener } from "@edgeandnode/common";
import { constants } from "ethers";
import { useContext, useMemo } from "react";
import { Box, Flex } from "theme-ui";
import accountArrow from "../../images/account-arrow.svg.js";
import { Identicon } from "../Identicon/Identicon.js";
import { GDSContext } from "../../theme/GDSContext.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Text } from "../../atoms/Text/Text.js";
import { useTheme } from "../../theme/useTheme.js";
import { Opacity } from "../../tokens/Opacity.js";
import { buildTransition } from "../../tokens/utils.js";
import { Icon } from "../../atoms/Icon/Icon.js";
const GraphAccount = ({
  ethereumAccount = constants.AddressZero,
  showAddress = true,
  shortenAddress = true,
  size = 36,
  showPill = false,
  onClick,
  className,
  graphAccount,
  ens,
  linkToEtherscan,
  shortenSecondaryAddress,
  NextLink: _NextLink,
  href,
  as,
  networkId = 1,
  showEnsNameWithAddress = false,
  vestingContract,
  ...props
}) => {
  var _a;
  const { clientLink: ClientLink } = useContext(GDSContext);
  const topAccount = useMemo(() => {
    var _a2, _b;
    if (((_a2 = graphAccount == null ? void 0 : graphAccount.defaultName) == null ? void 0 : _a2.name) || ens) {
      return appendEth(((_b = graphAccount == null ? void 0 : graphAccount.defaultName) == null ? void 0 : _b.name) || ens || "");
    } else {
      return shortenAddress ? addrShortener(ethereumAccount) : ethereumAccount;
    }
  }, [graphAccount, ens, shortenAddress, ethereumAccount]);
  const secondaryAccount = useMemo(() => {
    var _a2;
    if (vestingContract) {
      return shortenSecondaryAddress ? addrShortener(vestingContract) : vestingContract;
    } else if ((ens || ((_a2 = graphAccount == null ? void 0 : graphAccount.defaultName) == null ? void 0 : _a2.name)) && showEnsNameWithAddress || linkToEtherscan) {
      return shortenSecondaryAddress ? addrShortener(ethereumAccount) : ethereumAccount;
    } else {
      return null;
    }
  }, [vestingContract, shortenSecondaryAddress, ens, showEnsNameWithAddress, ethereumAccount]);
  const graphAccountImage = (graphAccount == null ? void 0 : graphAccount.image) || ((_a = graphAccount == null ? void 0 : graphAccount.metadata) == null ? void 0 : _a.image);
  const content = /* @__PURE__ */ jsxs(
    Flex,
    {
      className: "account-group",
      sx: {
        alignItems: "center",
        backgroundColor: showPill ? "White4" : "transparent",
        border: showPill ? "White2" : "none",
        borderRadius: `${size}px`,
        py: Spacing["4px"],
        pl: Spacing["4px"],
        pr: Spacing["12px"],
        transition: "all 0.3s ease",
        "&:hover": {
          transition: "all 0.3s ease"
        },
        "*, &:focus,": {
          outline: "none"
        },
        width: "fit-content"
      },
      children: [
        /* @__PURE__ */ jsx(
          "div",
          {
            sx: {
              mr: Spacing["8px"],
              display: "grid",
              placeItems: "center",
              borderRadius: BorderRadius.FULL,
              overflow: "hidden",
              width: `${size}px`,
              height: `${size}px`,
              minWidth: `${size}px`,
              minHeight: `${size}px`
            },
            onClick,
            children: graphAccountImage ? /* @__PURE__ */ jsx(
              "img",
              {
                src: graphAccountImage,
                alt: "Avatar",
                sx: { height: "100%", width: "100%", zIndex: 1, objectFit: "cover" }
              }
            ) : /* @__PURE__ */ jsx(Identicon, { account: ethereumAccount, size, padding: 1 })
          }
        ),
        /* @__PURE__ */ jsxs(Box, { sx: { whiteSpace: "nowrap" }, children: [
          showAddress ? /* @__PURE__ */ jsx("span", { className: "name-id", "data-testid": "ga__primary-addr", children: topAccount }) : null,
          showAddress && secondaryAccount ? /* @__PURE__ */ jsxs(
            EtherscanLink,
            {
              link: linkToEtherscan || !!vestingContract,
              vestingContract,
              ethereumAccount,
              networkId,
              children: [
                /* @__PURE__ */ jsx(
                  "img",
                  {
                    sx: {
                      width: "8px",
                      mr: Spacing["4px"]
                    },
                    src: accountArrow,
                    alt: "account arrow"
                  }
                ),
                /* @__PURE__ */ jsx(Text, { size: "14px", color: "White64", children: secondaryAccount })
              ]
            }
          ) : null
        ] })
      ]
    }
  );
  if (href) {
    return /* @__PURE__ */ jsx(ClientLink, { legacyBehavior: true, href, as, children: /* @__PURE__ */ jsx(Box, { sx: { cursor: "pointer" }, className, ...props, children: content }) });
  } else {
    return /* @__PURE__ */ jsx(Box, { children: content });
  }
};
function EtherscanLink({
  children,
  link,
  vestingContract,
  ethereumAccount,
  networkId
}) {
  const { theme } = useTheme();
  if (!link) {
    return /* @__PURE__ */ jsx(Flex, { "data-testid": "ga__secondary-addr", children });
  }
  const id = vestingContract || ethereumAccount;
  const url = `https://${networkId !== 1 ? "rinkeby." : ""}etherscan.io/address/${id}`;
  return /* @__PURE__ */ jsxs(
    "a",
    {
      "data-testid": "ga__secondary-addr-link",
      className: "ga__link",
      sx: {
        display: "flex",
        alignItems: "center",
        textDecoration: "none",
        transition: buildTransition("SHADOW"),
        "&:hover": {
          textShadow: `0px 0px 2px ${theme.colors.White64}, 0px 0px 16px ${theme.colors.Blue12}`,
          span: {
            color: "White88"
          }
        }
      },
      href: url,
      target: "_blank",
      rel: "noreferrer",
      onClick: (event) => event.stopPropagation(),
      children: [
        children,
        /* @__PURE__ */ jsx(
          Icon.ExternalLink,
          {
            sx: {
              ml: Spacing["4px"],
              opacity: 0,
              transition: buildTransition("OPACITY"),
              ".ga__link:hover &": {
                opacity: Opacity["64%"]
              }
            }
          }
        )
      ]
    }
  );
}
export {
  GraphAccount
};
