"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { memo } from "react";
import { Flex, Box } from "theme-ui";
import { Spacing } from "../../tokens/Spacing.js";
import { Tooltip } from "../Tooltip/Tooltip.js";
import { StatusCircle } from "../../atoms/StatusCircle/StatusCircle.js";
import { Icon } from "../../atoms/Icon/Icon.js";
const loaderSmall = "https://storage.thegraph.com/components/loader-small.gif";
const LoadingDots = memo(() => /* @__PURE__ */ jsx("img", { alt: "dots", src: loaderSmall, sx: { width: "10px", height: "10px", transform: "scale(3)" } }));
LoadingDots.displayName = "DataRow._LoadingDots";
const InfoUrl = memo(
  ({ url }) => url ? /* @__PURE__ */ jsx(
    "a",
    {
      href: url,
      target: "_blank",
      rel: "noreferrer noopener",
      sx: {
        marginLeft: "0.25rem",
        opacity: 0.72,
        transition: "all 0.3s ease",
        "&:hover": {
          transition: "all 0.3s ease",
          opacity: 1
        }
      },
      children: /* @__PURE__ */ jsx(Icon.Info, { sx: { width: "12px", ml: "5px", verticalAlign: "middle" } })
    }
  ) : null
);
InfoUrl.displayName = "DataRow._InfoUrl";
const PrimaryValue = memo(
  ({
    primaryValue,
    loading = false,
    unit,
    valueTooltip
  }) => primaryValue === null && loading ? /* @__PURE__ */ jsx(StatusCircle, { statusElement: /* @__PURE__ */ jsx(LoadingDots, {}) }) : /* @__PURE__ */ jsx(Box, { sx: { position: "relative" }, children: /* @__PURE__ */ jsx(
    Tooltip,
    {
      content: {
        title: valueTooltip == null ? void 0 : valueTooltip.title,
        text: valueTooltip == null ? void 0 : valueTooltip.text,
        type: "kpi"
      },
      children: /* @__PURE__ */ jsxs(
        "div",
        {
          sx: {
            fontSize: "0.875rem",
            lineHeight: "1.25rem",
            margin: 0,
            color: "rgba(255,255,255,0.92)",
            justifySelf: "end"
          },
          className: "value__primary",
          children: [
            primaryValue,
            unit ? /* @__PURE__ */ jsx("span", { sx: { fontSize: "0.625rem", ml: 1, fontWeight: 500 }, children: unit }) : null
          ]
        }
      )
    }
  ) })
);
PrimaryValue.displayName = "DataRow._PrimaryValue";
const SecondaryValue = memo(
  ({
    secondaryValue,
    valueTooltip
  }) => secondaryValue ? /* @__PURE__ */ jsx(
    Tooltip,
    {
      content: {
        title: valueTooltip == null ? void 0 : valueTooltip.title,
        text: valueTooltip == null ? void 0 : valueTooltip.text,
        type: "kpi"
      },
      children: /* @__PURE__ */ jsx(
        "p",
        {
          sx: {
            fontSize: "0.75rem",
            lineHeight: "1rem",
            letterSpacing: "1.2px",
            m: 0,
            color: "rgba(255,255,255,0.92)",
            justifySelf: "end"
          },
          className: "value__secondary",
          children: secondaryValue
        }
      )
    }
  ) : null
);
SecondaryValue.displayName = "DataRow._SecondaryValue";
const DataRow = ({
  title,
  unit,
  titleTooltip,
  valueTooltip,
  infoUrl,
  displayInfoCircle = false,
  loading = false,
  primaryValue,
  secondaryValue,
  sxPassthrough = {}
}) => /* @__PURE__ */ jsxs(Flex, { sx: { my: 2, justifyContent: "flex-start", alignItems: "center", width: "100%", ...sxPassthrough }, children: [
  /* @__PURE__ */ jsx(Box, { sx: { flexBasis: "75%" }, children: /* @__PURE__ */ jsxs(
    Flex,
    {
      sx: {
        color: "rgba(255,255,255,0.92)",
        position: "relative",
        fontSize: "0.875rem",
        lineHeight: "1.25rem",
        margin: 0,
        alignItems: "center"
      },
      children: [
        !(titleTooltip == null ? void 0 : titleTooltip.text) || displayInfoCircle ? /* @__PURE__ */ jsx("span", { children: title }) : /* @__PURE__ */ jsx(Tooltip, { content: titleTooltip, children: /* @__PURE__ */ jsx("span", { children: title }) }),
        /* @__PURE__ */ jsx(InfoUrl, { url: infoUrl }),
        infoUrl == null && displayInfoCircle ? /* @__PURE__ */ jsx(Tooltip, { content: titleTooltip, children: /* @__PURE__ */ jsx(Tooltip.InfoTrigger, { sx: { p: Spacing["8px"], m: `-${Spacing["8px"]}`, ml: "-3px" }, size: "12px" }) }) : null
      ]
    }
  ) }),
  /* @__PURE__ */ jsxs(Box, { sx: { alignSelf: "flex-start" }, children: [
    /* @__PURE__ */ jsx(PrimaryValue, { primaryValue, loading, unit, valueTooltip }),
    /* @__PURE__ */ jsx(SecondaryValue, { secondaryValue, valueTooltip })
  ] })
] });
export {
  DataRow
};
