import { cn } from "./index3.js";
import { ChartContainer, ChartTooltip } from "./index46.js";
import { useReducedMotion } from "./index47.js";
import { useSeriesHighlight } from "./index48.js";
import { WrapperChartLegend, sanitizeKey } from "./index49.js";
import { cva } from "class-variance-authority";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Label, Pie, PieChart } from "recharts";
//#region src/components/molecules/charts/DonutChart/DonutChart.tsx
var DEFAULT_DONUT_COLORS = [
	"var(--chart-1)",
	"var(--chart-2)",
	"var(--chart-3)"
];
var donutChartVariants = cva("relative flex items-center justify-center max-w-full", {
	variants: { size: {
		xs: "size-40",
		sm: "size-[200px]",
		md: "size-60",
		lg: "size-[280px]"
	} },
	defaultVariants: { size: "md" }
});
var SIZE_CONFIG = {
	xs: {
		dimension: 160,
		baseThickness: 16,
		innerRadius: 50
	},
	sm: {
		dimension: 200,
		baseThickness: 20,
		innerRadius: 60
	},
	md: {
		dimension: 240,
		baseThickness: 24,
		innerRadius: 75
	},
	lg: {
		dimension: 280,
		baseThickness: 28,
		innerRadius: 90
	}
};
function DonutChart({ data, series, centerValue, centerLabel, legendPosition = "none", ringGap = 4, ringThickness, startAngle = 90, showTooltip = true, size, className, "aria-label": ariaLabel, ...props }) {
	const prefersReducedMotion = useReducedMotion();
	const { highlightedSeries, setHighlightedSeries, getOpacity, dimTransition } = useSeriesHighlight(prefersReducedMotion);
	const getRingOpacity = (index) => getOpacity(series?.[index]?.id || `ring_${index + 1}`);
	const safeData = React.useMemo(() => data && Array.isArray(data) ? data : [], [data]);
	const colors = React.useMemo(() => safeData.map((d, i) => d.color || DEFAULT_DONUT_COLORS[i % DEFAULT_DONUT_COLORS.length]), [safeData]);
	const sizeConfig = SIZE_CONFIG[size || "md"];
	const chartConfig = React.useMemo(() => {
		const cfg = {};
		safeData.forEach((_, i) => {
			const key = sanitizeKey(series?.[i]?.id || `ring_${i + 1}`);
			cfg[key] = {
				label: series?.[i]?.label || `Ring ${i + 1}`,
				color: colors[i]
			};
			cfg[`${key}_remaining`] = {
				label: "Remaining",
				color: "var(--muted)"
			};
		});
		return cfg;
	}, [
		safeData,
		series,
		colors
	]);
	if (safeData.length === 0) return /* @__PURE__ */ jsx("div", {
		className: cn("flex items-center justify-center text-muted-foreground text-sm", donutChartVariants({ size }), className),
		...props,
		children: "No data available"
	});
	const maxRadius = sizeConfig.dimension / 2 - 4;
	const numRings = safeData.length;
	const minCenterHole = centerValue !== void 0 || centerLabel ? 30 : 10;
	const totalGaps = Math.max(0, numRings - 1) * ringGap;
	const thickness = ringThickness || Math.max(4, Math.floor((maxRadius - minCenterHole - totalGaps) / numRings));
	const getOuterRadius = (index) => {
		return maxRadius - index * (thickness + ringGap);
	};
	const getInnerRadius = (index) => {
		return getOuterRadius(index) - thickness;
	};
	return /* @__PURE__ */ jsxs("div", {
		className: cn("flex", legendPosition === "right" ? "flex-row gap-4" : "flex-col gap-4", legendPosition === "bottom" && "items-center"),
		role: "img",
		"aria-label": ariaLabel || "Donut chart",
		...props,
		children: [/* @__PURE__ */ jsx("div", {
			className: cn(donutChartVariants({ size }), className),
			children: /* @__PURE__ */ jsx(ChartContainer, {
				config: chartConfig,
				className: "w-full h-full",
				children: /* @__PURE__ */ jsxs(PieChart, { children: [safeData.map((d, index) => {
					const maxValue = d.maxValue || 100;
					const percentage = Math.min(d.value / maxValue * 100, 100);
					const remaining = 100 - percentage;
					const key = sanitizeKey(series?.[index]?.id || `ring_${index + 1}`);
					return /* @__PURE__ */ jsx(Pie, {
						data: [{
							name: key,
							value: percentage,
							fill: colors[index]
						}, {
							name: `${key}_remaining`,
							value: remaining,
							fill: "var(--muted)"
						}],
						dataKey: "value",
						nameKey: "name",
						innerRadius: getInnerRadius(index),
						outerRadius: getOuterRadius(index),
						startAngle,
						endAngle: startAngle - 360,
						cornerRadius: Math.min(thickness / 2, 6),
						paddingAngle: 0,
						opacity: getRingOpacity(index),
						style: dimTransition,
						isAnimationActive: !prefersReducedMotion,
						children: index === safeData.length - 1 && (centerValue !== void 0 || centerLabel) && /* @__PURE__ */ jsx(Label, { content: ({ viewBox }) => {
							if (viewBox && "cx" in viewBox && "cy" in viewBox) return /* @__PURE__ */ jsxs("text", {
								x: viewBox.cx,
								y: viewBox.cy,
								textAnchor: "middle",
								dominantBaseline: "middle",
								children: [centerLabel && /* @__PURE__ */ jsx("tspan", {
									x: viewBox.cx,
									y: (viewBox.cy || 0) - 10,
									className: cn("fill-muted-foreground font-medium", size === "xs" || size === "sm" ? "text-xs" : "text-sm"),
									children: centerLabel
								}), centerValue !== void 0 && /* @__PURE__ */ jsx("tspan", {
									x: viewBox.cx,
									y: (viewBox.cy || 0) + (centerLabel ? 12 : 0),
									className: cn("fill-foreground font-semibold", size === "xs" && "text-xl", size === "sm" && "text-display-xs", size === "md" && "text-display-sm", size === "lg" && "text-display-md"),
									children: typeof centerValue === "number" ? centerValue.toLocaleString() : centerValue
								})]
							});
						} })
					}, key);
				}), showTooltip && /* @__PURE__ */ jsx(ChartTooltip, { content: ({ payload }) => {
					const entry = payload?.[0];
					if (!entry) return null;
					const rawName = String(entry.name);
					const config = chartConfig[rawName.replace(/_remaining$/, "")];
					if (!config) return null;
					const ringValue = rawName.includes("_remaining") ? 100 - Number(entry.value) : Number(entry.value);
					return /* @__PURE__ */ jsx("div", {
						className: "rounded-lg border bg-background px-3 py-1.5 text-xs shadow-md",
						children: /* @__PURE__ */ jsxs("div", {
							className: "flex items-center gap-2",
							children: [
								/* @__PURE__ */ jsx("div", {
									className: "size-2 rounded-full",
									style: { backgroundColor: config.color }
								}),
								/* @__PURE__ */ jsx("span", { children: config.label }),
								/* @__PURE__ */ jsxs("span", {
									className: "font-medium",
									children: [ringValue.toFixed(0), "%"]
								})
							]
						})
					});
				} })] })
			})
		}), legendPosition !== "none" && series && /* @__PURE__ */ jsx(WrapperChartLegend, {
			series,
			position: legendPosition === "bottom" ? "top" : "right",
			onSeriesHover: setHighlightedSeries,
			highlightedSeries
		})]
	});
}
DonutChart.displayName = "DonutChart";
//#endregion
export { DEFAULT_DONUT_COLORS, DonutChart, donutChartVariants };

//# sourceMappingURL=index51.js.map