"use client";
import { jsx as c, jsxs as m, Fragment as I } from "react/jsx-runtime";
import * as x from "react";
import * as _ from "recharts";
import { cn as u } from "../../../lib/utils.js";
const K = { light: "", dark: ".dark" }, T = { width: 320, height: 200 }, N = x.createContext(null);
function $() {
  const e = x.useContext(N);
  if (!e)
    throw new Error("useChart must be used within a <ChartContainer />");
  return e;
}
function M({
  id: e,
  className: r,
  children: t,
  config: n,
  initialDimension: s = T,
  ...i
}) {
  const o = x.useId(), a = `chart-${e ?? o.replace(/:/g, "")}`;
  return /* @__PURE__ */ c(N.Provider, { value: { config: n }, children: /* @__PURE__ */ m(
    "div",
    {
      className: u(
        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
        r
      ),
      "data-chart": a,
      "data-slot": "chart",
      ...i,
      children: [
        /* @__PURE__ */ c(L, { config: n, id: a }),
        /* @__PURE__ */ c(
          _.ResponsiveContainer,
          {
            initialDimension: s,
            children: t
          }
        )
      ]
    }
  ) });
}
const L = ({ id: e, config: r }) => {
  const t = Object.entries(r).filter(
    ([, s]) => s.theme ?? s.color
  );
  if (!t.length)
    return null;
  const n = Object.entries(K).map(
    ([s, i]) => `
${i} [data-chart=${e}] {
${t.map(([o, a]) => {
      const l = a.theme?.[s] ?? a.color;
      return l ? `  --color-${o}: ${l};` : null;
    }).filter(Boolean).join(`
`)}
}`
  ).join(`
`);
  return /* @__PURE__ */ c("style", { children: n });
};
function P({
  item: e,
  index: r,
  config: t,
  indicator: n,
  hideIndicator: s,
  color: i,
  formatter: o,
  nameKey: a,
  nestLabel: l,
  tooltipLabel: h
}) {
  const b = `${a ?? e.name ?? e.dataKey ?? "value"}`, p = k(t, e, b), f = i ?? e.payload?.fill ?? e.color, g = `${e.dataKey ?? e.name ?? r}`;
  return /* @__PURE__ */ c(
    "div",
    {
      className: u(
        "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
        n === "dot" && "items-center"
      ),
      children: o && e?.value !== void 0 && e.name ? o(e.value, e.name, e, r, e.payload) : /* @__PURE__ */ m(I, { children: [
        p?.icon ? /* @__PURE__ */ c(p.icon, {}) : !s && /* @__PURE__ */ c(
          "div",
          {
            className: u(
              "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
              {
                "h-2.5 w-2.5": n === "dot",
                "w-1": n === "line",
                "w-0 border-[1.5px] border-dashed bg-transparent": n === "dashed",
                "my-0.5": l && n === "dashed"
              }
            ),
            style: {
              "--color-bg": f,
              "--color-border": f
            }
          }
        ),
        /* @__PURE__ */ m(
          "div",
          {
            className: u(
              "flex flex-1 justify-between leading-none",
              l ? "items-end" : "items-center"
            ),
            children: [
              /* @__PURE__ */ m("div", { className: "grid gap-1.5", children: [
                l ? h : null,
                /* @__PURE__ */ c("span", { className: "text-muted-foreground", children: p?.label ?? e.name })
              ] }),
              e.value != null && /* @__PURE__ */ c("span", { className: "font-medium font-mono text-foreground tabular-nums", children: typeof e.value == "number" ? e.value.toLocaleString() : String(e.value) })
            ]
          }
        )
      ] })
    },
    g
  );
}
const O = _.Tooltip;
function R({
  active: e,
  payload: r,
  className: t,
  indicator: n = "dot",
  hideLabel: s = !1,
  hideIndicator: i = !1,
  label: o,
  labelFormatter: a,
  labelClassName: l,
  formatter: h,
  color: b,
  nameKey: p,
  labelKey: f
}) {
  const { config: g } = $(), w = x.useMemo(() => {
    if (s || !r?.length)
      return null;
    const [d] = r, v = `${f ?? d?.dataKey ?? d?.name ?? "value"}`, j = k(g, d, v), C = !f && typeof o == "string" ? g[o]?.label ?? o : j?.label;
    return a ? /* @__PURE__ */ c("div", { className: u("font-medium", l), children: a(C, r) }) : C ? /* @__PURE__ */ c("div", { className: u("font-medium", l), children: C }) : null;
  }, [
    o,
    a,
    r,
    s,
    l,
    g,
    f
  ]);
  if (!(e && r?.length))
    return null;
  const y = r.length === 1 && n !== "dot";
  return /* @__PURE__ */ m(
    "div",
    {
      className: u(
        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
        t
      ),
      children: [
        y ? null : w,
        /* @__PURE__ */ c("div", { className: "grid gap-1.5", children: r.filter((d) => d.type !== "none").map((d, v) => /* @__PURE__ */ c(
          P,
          {
            color: b,
            config: g,
            formatter: h,
            hideIndicator: i,
            index: v,
            indicator: n,
            item: d,
            nameKey: p,
            nestLabel: y,
            tooltipLabel: w
          },
          `${d.dataKey ?? d.name ?? v}`
        )) })
      ]
    }
  );
}
const q = _.Legend;
function A({
  className: e,
  hideIcon: r = !1,
  payload: t,
  verticalAlign: n = "bottom",
  nameKey: s
}) {
  const { config: i } = $();
  return t?.length ? /* @__PURE__ */ c(
    "div",
    {
      className: u(
        "flex items-center justify-center gap-4",
        n === "top" ? "pb-3" : "pt-3",
        e
      ),
      children: t.filter((o) => o.type !== "none").map((o, a) => {
        const l = `${s ?? o.dataKey ?? "value"}`, h = k(i, o, l);
        return /* @__PURE__ */ m(
          "div",
          {
            className: u(
              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
            ),
            children: [
              h?.icon && !r ? /* @__PURE__ */ c(h.icon, {}) : /* @__PURE__ */ c(
                "div",
                {
                  className: "h-2 w-2 shrink-0 rounded-[2px]",
                  style: {
                    backgroundColor: o.color
                  }
                }
              ),
              h?.label
            ]
          },
          `${o.dataKey ?? o.value ?? a}`
        );
      })
    }
  ) : null;
}
function k(e, r, t) {
  if (typeof r != "object" || r === null)
    return;
  const n = "payload" in r && typeof r.payload == "object" && r.payload !== null ? r.payload : void 0;
  let s = t;
  return t in r && typeof r[t] == "string" ? s = r[t] : n && t in n && typeof n[t] == "string" && (s = n[t]), s in e ? e[s] : e[t];
}
export {
  M as ChartContainer,
  q as ChartLegend,
  A as ChartLegendContent,
  L as ChartStyle,
  O as ChartTooltip,
  R as ChartTooltipContent
};
