import { cn } from "./index3.js";
import { ChartContainer, ChartTooltip, ChartTooltipContent } 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 { Cell, Pie, PieChart } from "recharts";
//#region src/components/molecules/charts/PieChart/PieChart.tsx
var DEFAULT_PIE_COLORS = [
	"var(--chart-1)",
	"var(--chart-2)",
	"var(--chart-3)",
	"var(--chart-4)",
	"var(--chart-5)",
	"var(--border)"
];
var pieChartVariants = cva("relative flex items-center max-w-full", {
	variants: { size: {
		xxs: "size-[120px]",
		xs: "size-[160px]",
		sm: "size-[200px]",
		md: "size-[240px]",
		lg: "size-[280px]"
	} },
	defaultVariants: { size: "md" }
});
function PieChart$1({ data, series, legendPosition = "none", hole = "none", startAngle = 90, showTooltip = true, paddingAngle = 2, size, className, "aria-label": ariaLabel, ...props }) {
	const prefersReducedMotion = useReducedMotion();
	const { highlightedSeries, setHighlightedSeries, getOpacity, dimTransition } = useSeriesHighlight(prefersReducedMotion);
	const colors = React.useMemo(() => data.map((d, i) => d.color || DEFAULT_PIE_COLORS[i % DEFAULT_PIE_COLORS.length]), [data]);
	const getInnerRadiusPercent = () => {
		switch (hole) {
			case "25%": return 25;
			case "50%": return 50;
			case "75%": return 75;
			default: return 0;
		}
	};
	const chartConfig = React.useMemo(() => {
		const config = {};
		data.forEach((d, i) => {
			const key = sanitizeKey(d.id);
			config[key] = {
				label: d.label,
				color: colors[i]
			};
		});
		return config;
	}, [data, colors]);
	const legendSeries = series || data.map((d, i) => ({
		id: d.id,
		label: d.label,
		color: colors[i]
	}));
	const chartData = React.useMemo(() => data.map((d, i) => ({
		name: sanitizeKey(d.id),
		displayName: d.label,
		value: d.value,
		fill: colors[i]
	})), [data, colors]);
	const innerRadiusPercent = getInnerRadiusPercent();
	return /* @__PURE__ */ jsxs("div", {
		className: cn("flex", legendPosition === "right" ? "flex-row gap-4" : "flex-col gap-4"),
		role: "img",
		"aria-label": ariaLabel || "Pie chart",
		...props,
		children: [/* @__PURE__ */ jsx("div", {
			className: cn(pieChartVariants({ size }), className),
			children: /* @__PURE__ */ jsx(ChartContainer, {
				config: chartConfig,
				className: "w-full h-full",
				children: /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx(Pie, {
					data: chartData,
					dataKey: "value",
					nameKey: "name",
					cx: "50%",
					cy: "50%",
					innerRadius: `${innerRadiusPercent}%`,
					outerRadius: "100%",
					startAngle,
					endAngle: startAngle - 360,
					paddingAngle,
					isAnimationActive: !prefersReducedMotion,
					children: chartData.map((entry, index) => /* @__PURE__ */ jsx(Cell, {
						fill: colors[index],
						opacity: getOpacity(data[index].id),
						style: dimTransition
					}, `cell-${entry.name}`))
				}), showTooltip && /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, {
					hideLabel: true,
					formatter: (value, name) => {
						const displayName = chartData.find((d) => d.name === name)?.displayName || name;
						const total = data.reduce((sum, d) => sum + d.value, 0);
						const percentage = (Number(value) / total * 100).toFixed(1);
						return /* @__PURE__ */ jsxs("div", {
							className: "flex items-center gap-2",
							children: [
								/* @__PURE__ */ jsx("div", {
									className: "size-2 rounded-full",
									style: { backgroundColor: chartConfig[name]?.color }
								}),
								/* @__PURE__ */ jsx("span", { children: displayName }),
								/* @__PURE__ */ jsxs("span", {
									className: "font-medium",
									children: [
										Number(value).toLocaleString(),
										" (",
										percentage,
										"%)"
									]
								})
							]
						});
					}
				}) })] })
			})
		}), legendPosition !== "none" && /* @__PURE__ */ jsx(WrapperChartLegend, {
			series: legendSeries,
			position: "right",
			onSeriesHover: setHighlightedSeries,
			highlightedSeries
		})]
	});
}
PieChart$1.displayName = "PieChart";
//#endregion
export { DEFAULT_PIE_COLORS, PieChart$1 as PieChart, pieChartVariants };

//# sourceMappingURL=index53.js.map