import { o as K } from "./rolldown-runtime.js";
import { i as N, t as z } from "./vendor/react.js";
import { A as I, C as j, S as R, T as $, _ as D, b as T, g as w, h as E, j as m, p as P, tt as O, v as y, x as q, y as k } from "./vendor/recharts.js";
import { t as L } from "./utils.js";
import { n as B } from "./interaction-context.js";
var F = /* @__PURE__ */ K(N(), 1), a = z(), G = [
  "var(--chart-1)",
  "var(--chart-2)",
  "var(--chart-3)",
  "var(--chart-4)",
  "var(--chart-5)"
], H = 300;
function U(o) {
  return o ? Array.isArray(o) ? o : [o] : ["value"];
}
function c(o, s) {
  const f = s && s.length > 0 ? s : G;
  return f[o % f.length];
}
function W({ schema: o, className: s }) {
  const { onInteraction: f } = B(), { id: g, type: p, title: l, data: t, xKey: i = "name", yKey: S, colors: n, interactive: d = !1, height: C = H } = o, x = U(S), h = F.useCallback((e, r) => {
    d && f?.({
      componentId: g,
      componentType: "chart",
      action: "click",
      value: {
        label: r ?? e[i],
        ...e
      },
      timestamp: Date.now()
    });
  }, [
    d,
    f,
    g,
    i
  ]), _ = l ? `${l} - ${p} chart with ${t.length} data points` : `${p} chart with ${t.length} data points`;
  if (!t || t.length === 0) return /* @__PURE__ */ (0, a.jsx)("div", {
    "data-slot": "ai-chart",
    role: "img",
    "aria-label": l ? `${l} - No data available` : "Chart - No data available",
    className: L("flex items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", s),
    style: { height: C },
    children: "No data available"
  });
  const A = () => {
    switch (p) {
      case "bar":
        return /* @__PURE__ */ (0, a.jsxs)(w, {
          data: t,
          children: [
            /* @__PURE__ */ (0, a.jsx)(j, {
              strokeDasharray: "3 3",
              vertical: !1,
              className: "stroke-border"
            }),
            /* @__PURE__ */ (0, a.jsx)(k, {
              dataKey: i,
              tickLine: !1,
              axisLine: !1,
              tick: {
                fill: "var(--muted-foreground)",
                fontSize: 12
              }
            }),
            /* @__PURE__ */ (0, a.jsx)(y, {
              tickLine: !1,
              axisLine: !1,
              tick: {
                fill: "var(--muted-foreground)",
                fontSize: 12
              }
            }),
            /* @__PURE__ */ (0, a.jsx)(m, { contentStyle: {
              backgroundColor: "var(--card)",
              border: "1px solid var(--border)",
              borderRadius: "8px"
            } }),
            x.map((e, r) => /* @__PURE__ */ (0, a.jsx)(T, {
              dataKey: e,
              fill: c(r, n),
              radius: [
                4,
                4,
                0,
                0
              ],
              cursor: d ? "pointer" : void 0,
              onClick: (v) => h(v)
            }, e))
          ]
        });
      case "line":
        return /* @__PURE__ */ (0, a.jsxs)(D, {
          data: t,
          children: [
            /* @__PURE__ */ (0, a.jsx)(j, {
              strokeDasharray: "3 3",
              vertical: !1,
              className: "stroke-border"
            }),
            /* @__PURE__ */ (0, a.jsx)(k, {
              dataKey: i,
              tickLine: !1,
              axisLine: !1,
              tick: {
                fill: "var(--muted-foreground)",
                fontSize: 12
              }
            }),
            /* @__PURE__ */ (0, a.jsx)(y, {
              tickLine: !1,
              axisLine: !1,
              tick: {
                fill: "var(--muted-foreground)",
                fontSize: 12
              }
            }),
            /* @__PURE__ */ (0, a.jsx)(m, { contentStyle: {
              backgroundColor: "var(--card)",
              border: "1px solid var(--border)",
              borderRadius: "8px"
            } }),
            x.map((e, r) => /* @__PURE__ */ (0, a.jsx)(R, {
              type: "monotone",
              dataKey: e,
              stroke: c(r, n),
              strokeWidth: 2,
              dot: {
                fill: c(r, n),
                r: 4
              },
              activeDot: {
                r: 6,
                cursor: d ? "pointer" : void 0,
                onClick: (v, b) => {
                  const u = b;
                  u?.payload && h(u.payload);
                }
              }
            }, e))
          ]
        });
      case "area":
        return /* @__PURE__ */ (0, a.jsxs)(P, {
          data: t,
          children: [
            /* @__PURE__ */ (0, a.jsx)(j, {
              strokeDasharray: "3 3",
              vertical: !1,
              className: "stroke-border"
            }),
            /* @__PURE__ */ (0, a.jsx)(k, {
              dataKey: i,
              tickLine: !1,
              axisLine: !1,
              tick: {
                fill: "var(--muted-foreground)",
                fontSize: 12
              }
            }),
            /* @__PURE__ */ (0, a.jsx)(y, {
              tickLine: !1,
              axisLine: !1,
              tick: {
                fill: "var(--muted-foreground)",
                fontSize: 12
              }
            }),
            /* @__PURE__ */ (0, a.jsx)(m, { contentStyle: {
              backgroundColor: "var(--card)",
              border: "1px solid var(--border)",
              borderRadius: "8px"
            } }),
            x.map((e, r) => /* @__PURE__ */ (0, a.jsx)(q, {
              type: "monotone",
              dataKey: e,
              stroke: c(r, n),
              fill: c(r, n),
              fillOpacity: 0.3,
              strokeWidth: 2,
              activeDot: {
                r: 6,
                cursor: d ? "pointer" : void 0,
                onClick: (v, b) => {
                  const u = b;
                  u?.payload && h(u.payload);
                }
              }
            }, e))
          ]
        });
      case "pie":
        return /* @__PURE__ */ (0, a.jsxs)(E, { children: [/* @__PURE__ */ (0, a.jsx)($, {
          data: t,
          dataKey: x[0],
          nameKey: i,
          cx: "50%",
          cy: "50%",
          outerRadius: "80%",
          label: ({ name: e }) => e,
          labelLine: !1,
          cursor: d ? "pointer" : void 0,
          onClick: (e) => h(e, e?.name),
          children: t.map((e, r) => /* @__PURE__ */ (0, a.jsx)(I, { fill: c(r, n) }, `cell-${e[i] ?? r}`))
        }), /* @__PURE__ */ (0, a.jsx)(m, { contentStyle: {
          backgroundColor: "var(--card)",
          border: "1px solid var(--border)",
          borderRadius: "8px"
        } })] });
      default:
        return null;
    }
  };
  return /* @__PURE__ */ (0, a.jsxs)("div", {
    "data-slot": "ai-chart",
    role: "img",
    "aria-label": _,
    className: L("flex flex-col gap-2", s),
    children: [l && /* @__PURE__ */ (0, a.jsx)("h3", {
      className: "text-sm font-medium text-foreground",
      children: l
    }), /* @__PURE__ */ (0, a.jsx)("div", {
      style: { height: C },
      children: /* @__PURE__ */ (0, a.jsx)(O, {
        width: "100%",
        height: "100%",
        children: A()
      })
    })]
  });
}
W.displayName = "AIChart";
export {
  W as t
};

//# sourceMappingURL=AIChart.js.map