import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../utils/cn.js";
import { SSRSafeResponsiveContainer } from "./ssr-safe-container.js";
import { calculateLabelSettings, extractDataRange, calculateYAxisWidth, defaultYAxisWidth, getChartMargin, defaultGridProps, CustomXAxisTick, defaultYAxisTickFormatter, defaultLegendProps, getDefaultChartColor } from "./chart-utils.js";
import * as React from "react";
import { forwardRef } from "react";
import { J as arrayTooltipSearcher, T as Tooltip } from "../../RechartsWrapper-B6DckFGn.js";
import { C as CartesianChart } from "../../CartesianChart-6PlEqMR8.js";
import { C as CartesianGrid, X as XAxis, Y as YAxis } from "../../YAxis-DXrEaAmy.js";
import { L as Legend } from "../../CategoricalChart-B4Tr_94h.js";
import { A as Area } from "../../Area-BiaTXuF7.js";
var allowedTooltipTypes = ["axis"];
var AreaChart$1 = /* @__PURE__ */ forwardRef((props, ref) => {
  return /* @__PURE__ */ React.createElement(CartesianChart, {
    chartName: "AreaChart",
    defaultTooltipEventType: "axis",
    validateTooltipEventTypes: allowedTooltipTypes,
    tooltipPayloadSearcher: arrayTooltipSearcher,
    categoricalChartProps: props,
    ref
  });
});
const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-subtle bg-popover/95 backdrop-blur-md p-3 shadow-2xl", children: [
      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-strong mb-2", children: label }),
      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: payload.map((entry, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ jsx(
          "div",
          {
            className: "w-2 h-2 rounded-full",
            style: { backgroundColor: entry.color }
          }
        ),
        /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-subtle", children: [
          entry.name,
          ":"
        ] }),
        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-strong ml-auto", children: typeof entry.value === "number" ? entry.value.toLocaleString() : entry.value })
      ] }, index)) })
    ] });
  }
  return null;
};
function AreaChart({
  data,
  config,
  className,
  showGrid = true,
  showTooltip = true,
  showLegend = false,
  showXAxis = true,
  showYAxis = true,
  xAxisKey = "name",
  xAxisProps,
  yAxisProps,
  tooltipProps,
  legendProps,
  areaProps,
  height = 400,
  width = "100%"
}) {
  const getColor = (index, customColor) => {
    if (customColor) return customColor;
    return getDefaultChartColor(index);
  };
  const xLabels = data.map((item) => String(item[xAxisKey] || ""));
  const labelSettings = calculateLabelSettings(
    xLabels,
    typeof width === "number" ? width : 800
  );
  const dataRange = extractDataRange(data, Object.keys(config));
  const yAxisWidth = dataRange ? calculateYAxisWidth(dataRange.min, dataRange.max, 10) : defaultYAxisWidth;
  return /* @__PURE__ */ jsx("div", { className: cn("w-full focus:outline-none", className), children: /* @__PURE__ */ jsx(SSRSafeResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: getChartMargin(showLegend), children: [
    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { ...defaultGridProps }),
    showXAxis && /* @__PURE__ */ jsx(
      XAxis,
      {
        dataKey: xAxisKey,
        stroke: "var(--text-subtle)",
        tick: (props) => /* @__PURE__ */ jsx(
          CustomXAxisTick,
          {
            ...props,
            angle: labelSettings.angle,
            fontSize: labelSettings.fontSize,
            truncateLength: labelSettings.truncateLength,
            showTooltip: labelSettings.showTooltip,
            formatLabels: labelSettings.formatLabels,
            locale: labelSettings.locale
          }
        ),
        axisLine: false,
        tickLine: { stroke: "var(--border-default)" },
        height: labelSettings.angle !== 0 ? 80 : 30,
        ...xAxisProps
      }
    ),
    showYAxis && /* @__PURE__ */ jsx(
      YAxis,
      {
        stroke: "var(--text-subtle)",
        tick: { fill: "var(--text-subtle)", fontSize: 10 },
        axisLine: false,
        tickLine: false,
        width: yAxisWidth,
        tickFormatter: defaultYAxisTickFormatter,
        ...yAxisProps
      }
    ),
    showTooltip && /* @__PURE__ */ jsx(
      Tooltip,
      {
        content: /* @__PURE__ */ jsx(CustomTooltip, {}),
        cursor: { fill: "var(--bg-subtle)" },
        ...tooltipProps
      }
    ),
    showLegend && /* @__PURE__ */ jsx(Legend, { ...defaultLegendProps, ...legendProps }),
    Object.entries(config).map(([key, value], index) => /* @__PURE__ */ jsx(
      Area,
      {
        type: "monotone",
        dataKey: key,
        name: value.label || key,
        stroke: getColor(index, value.color),
        fill: getColor(index, value.color),
        fillOpacity: 0.15,
        strokeWidth: value.strokeWidth || 1.5,
        stackId: value.stackId,
        activeDot: {
          r: 3,
          strokeWidth: 1.5,
          stroke: "var(--bg-default)",
          fill: getColor(index, value.color)
        },
        isAnimationActive: false,
        ...areaProps
      },
      key
    ))
  ] }) }) });
}
AreaChart.displayName = "AreaChart";
export {
  AreaChart
};
