"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { addrShortener, bigNumberify, toGRT } from "@edgeandnode/common";
import { Tag } from "../../atoms/Tag/Tag.js";
import { Flex } from "../../atoms/Flex/Flex.js";
import { buildTransition } from "../../tokens/utils.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
import { Opacity } from "../../tokens/Opacity.js";
import { FontWeight } from "../../tokens/FontWeight.js";
import { FontSize } from "../../tokens/FontSize.js";
import { LineHeight } from "../../tokens/LineHeight.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Identicon } from "../Identicon/Identicon.js";
import { Text } from "../../atoms/Text/Text.js";
import { LetterSpacing } from "../../tokens/LetterSpacing.js";
import { ButtonOrLink } from "../../atoms/ButtonOrLink/ButtonOrLink.js";
function SubgraphCard({
  image,
  displayName,
  totalGRT,
  onClick,
  subgraphStatus,
  ownerAccount,
  ...rest
}) {
  var _a;
  const ownerName = ((_a = ownerAccount.defaultName) == null ? void 0 : _a.name) ? ownerAccount.defaultName.name.endsWith(".eth") ? ownerAccount.defaultName.name : `${ownerAccount.defaultName.name}.eth` : ownerAccount.id ? addrShortener(ownerAccount.id) : null;
  return /* @__PURE__ */ jsxs(SubgraphCardContainer, { onClick, ...rest, children: [
    /* @__PURE__ */ jsxs(Flex.Center, { sx: { position: "static", flexShrink: 0 }, children: [
      /* @__PURE__ */ jsx(
        "img",
        {
          src: image,
          alt: "",
          sx: {
            display: "block",
            width: "calc(100% - 76px)",
            aspectRatio: "1 / 1",
            objectFit: "cover",
            mixBlendMode: "revert",
            borderRadius: BorderRadius.S,
            transition: buildTransition("TRANSFORM", "400ms"),
            ".gds-SubgraphCard:hover &": {
              transform: "translateY(-5px)"
            }
          }
        }
      ),
      /* @__PURE__ */ jsx(
        "img",
        {
          src: image,
          alt: "",
          sx: {
            zIndex: -1,
            position: "absolute",
            left: 0,
            top: 0,
            width: "100%",
            height: "100%",
            backgroundImage: `url(${image})`,
            backgroundSize: "250%",
            backgroundPosition: "center",
            filter: "blur(48px)",
            transition: buildTransition("OPACITY", "400ms"),
            // Fix performance issue with `filter: blur` in Safari
            // https://graffino.com/til/CjT2jrcLHP-how-to-fix-filter-blur-performance-issue-in-safari
            // https://browserstrangeness.bitbucket.io/css_hacks.html#safari
            "@supports (-webkit-hyphens: none)": {
              transform: "translate3d(0, 0, 0)"
            },
            opacity: Opacity["64%"],
            ".gds-SubgraphCard:hover &": {
              opacity: Opacity["100%"]
            }
          }
        }
      )
    ] }),
    /* @__PURE__ */ jsx(
      Flex.Row,
      {
        sx: {
          textAlign: "center",
          fontSize: "10px",
          "@media (max-width: 748px)": {
            maxHeight: "none",
            span: {
              maxWidth: "100%",
              wordBreak: "break-all"
            }
          }
        },
        children: /* @__PURE__ */ jsxs(
          Flex.Column,
          {
            align: "center",
            justify: "center",
            sx: {
              maxWidth: "inherit",
              color: "Text",
              fontSize: FontSize["16px"],
              fontWeight: FontWeight.MEDIUM,
              textAlign: "center",
              textShadow: "0 0 64px rgba(192,219,255,0.48), 0 0 8px rgba(65,120,255,0.24)"
            },
            children: [
              ownerAccount.id != null ? /* @__PURE__ */ jsxs(
                Flex.Row,
                {
                  align: "center",
                  gap: Spacing["4px"],
                  sx: {
                    height: "12px",
                    lineHeight: LineHeight.NONE,
                    transition: buildTransition("COLORS", "400ms"),
                    color: "White64",
                    ".gds-SubgraphCard:hover &": {
                      color: "White"
                    }
                  },
                  children: [
                    ownerAccount.image ? /* @__PURE__ */ jsx(
                      "img",
                      {
                        alt: "",
                        width: 12,
                        height: 12,
                        sx: { borderRadius: BorderRadius.FULL, height: "12px", width: "12px" },
                        src: ownerAccount.image
                      }
                    ) : /* @__PURE__ */ jsx(Identicon, { account: ownerAccount.id, size: 12, padding: 1 }),
                    /* @__PURE__ */ jsx(Text.P12, { truncate: true, children: ownerName })
                  ]
                }
              ) : null,
              /* @__PURE__ */ jsx(
                Text.P16,
                {
                  truncate: true,
                  sx: {
                    whiteSpace: "nowrap",
                    transition: buildTransition("COLORS", "400ms"),
                    width: 140,
                    overflow: "hidden",
                    my: Spacing["2px"],
                    ".gds-SubgraphCard:hover &": {
                      color: "White"
                    }
                  },
                  children: displayName
                }
              ),
              subgraphStatus,
              bigNumberify(totalGRT || "0").gt(0) ? /* @__PURE__ */ jsx(Flex.Row, { justify: "center", align: "center", children: /* @__PURE__ */ jsx(
                Tag,
                {
                  sx: {
                    transition: buildTransition("COLORS", "400ms"),
                    mt: Spacing["8px"],
                    fontSize: FontSize["10px"],
                    lineHeight: "initial",
                    fontWeight: FontWeight.MEDIUM,
                    textTransform: "uppercase",
                    width: "fit-content",
                    padding: "2px 12px",
                    color: "White",
                    backgroundColor: "transparent",
                    border: "White8",
                    letterSpacing: LetterSpacing.WIDE,
                    ".gds-SubgraphCard:hover &": {
                      color: "White"
                    }
                  },
                  children: `Signal: ${toGRT(totalGRT || "0")} GRT`
                }
              ) }) : null
            ]
          }
        )
      }
    )
  ] });
}
function SubgraphCardContainer({ children, ...rest }) {
  return /* @__PURE__ */ jsx(
    ButtonOrLink,
    {
      className: "gds-SubgraphCard",
      sx: {
        maxWidth: "232px",
        maxHeight: "232px",
        backdropFilter: Opacity["8%"],
        borderRadius: BorderRadius.S,
        backgroundColor: "White16",
        overflow: "hidden",
        cursor: "pointer",
        position: "relative",
        transition: "all 0.2s cubic-bezier(0.64, 0.04, 0.35, 1)",
        border: "White8",
        "&:hover": {
          boder: "White16",
          transformOrigin: "center",
          boxShadow: "0 18px 24px 0 rgba(0,0,0,0.4)"
        },
        "::before": {
          content: '""',
          display: "block",
          paddingBottom: "100%"
        }
      },
      ...rest,
      children: /* @__PURE__ */ jsx(
        Flex.Column,
        {
          justify: "center",
          align: "center",
          gap: Spacing["16px"],
          sx: {
            position: "absolute",
            inset: 0,
            p: Spacing["16px"]
          },
          children
        }
      )
    }
  );
}
function SubgraphCardExtra({ title, subtitle, icon, children, ...rest }) {
  return /* @__PURE__ */ jsxs(SubgraphCardContainer, { ...rest, children: [
    children,
    /* @__PURE__ */ jsxs(
      Flex.Column,
      {
        justify: "center",
        align: "center",
        sx: {
          maxWidth: "inherit",
          color: "Text",
          fontSize: FontSize["16px"],
          fontWeight: FontWeight.MEDIUM,
          textAlign: "center",
          textShadow: "0 0 64px rgba(192,219,255,0.48), 0 0 8px rgba(65,120,255,0.24)"
        },
        children: [
          /* @__PURE__ */ jsx(
            "div",
            {
              sx: {
                transition: buildTransition("ALL", "400ms"),
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "White88",
                ".gds-SubgraphCard:hover &": { transform: "translateY(-8px)" }
              },
              children: icon
            }
          ),
          /* @__PURE__ */ jsx(
            Text.H18,
            {
              sx: {
                transition: buildTransition("COLORS", "400ms"),
                width: 184,
                mt: Spacing["24px"],
                color: "White88",
                ".gds-SubgraphCard:hover &": { color: "White" }
              },
              children: title
            }
          ),
          /* @__PURE__ */ jsx(
            Text.P14,
            {
              sx: {
                transition: buildTransition("COLORS", "400ms"),
                width: 184,
                mt: Spacing["8px"],
                color: "White88",
                ".gds-SubgraphCard:hover &": { color: "White" }
              },
              children: subtitle
            }
          )
        ]
      }
    )
  ] });
}
const SubgraphCardExtraBackground = (props) => {
  const Root = props.src ? "img" : "div";
  return /* @__PURE__ */ jsx(
    Root,
    {
      alt: props.src ? "" : void 0,
      sx: {
        position: "absolute",
        zIndex: -1,
        transition: buildTransition("OPACITY", "400ms"),
        opacity: Opacity["64%"],
        objectFit: "cover",
        objectPosition: "center",
        width: "100%",
        ".gds-SubgraphCard:hover &": {
          opacity: Opacity["100%"],
          color: "White"
        }
      },
      ...props
    }
  );
};
SubgraphCardExtraBackground.displayName = "SubgraphCardExtra.Background";
SubgraphCardExtra.Background = SubgraphCardExtraBackground;
export {
  SubgraphCard,
  SubgraphCardExtra
};
