import { cn } from "./index3.js";
import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./index46.js";
import { useReducedMotion } from "./index47.js";
import { useSeriesHighlight } from "./index48.js";
import { DEFAULT_CHART_COLORS, WrapperChartLegend, sanitizeKey } from "./index49.js";
import { cva } from "class-variance-authority";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
//#region src/components/molecules/charts/BarChart/BarChart.tsx
var DEFAULT_BAR_COLORS = [
	"var(--border)",
	"var(--chart-2)",
	"var(--chart-1)"
];
var barChartVariants = cva("relative w-full", {
	variants: { size: {
		sm: "h-40",
		default: "h-60",
		lg: "h-80",
		xl: "h-96"
	} },
	defaultVariants: { size: "default" }
});
function BarChart$1({ data, series, showYAxis = true, showXAxis = true, yAxisLabel, xAxisLabel, legendPosition = "none", yAxisTicks, yAxisFormat = (v) => v.toLocaleString(), barMode = "stacked", barRadius = 4, showTooltip = true, size, className, "aria-label": ariaLabel, ...props }) {
	const prefersReducedMotion = useReducedMotion();
	const { highlightedSeries, setHighlightedSeries, getOpacity, dimTransition } = useSeriesHighlight(prefersReducedMotion);
	const chartData = React.useMemo(() => data.map((d) => {
		const point = { label: d.label };
		for (const s of series) {
			const key = sanitizeKey(s.id);
			point[key] = d.values[s.id] ?? 0;
		}
		return point;
	}), [data, series]);
	const chartConfig = React.useMemo(() => {
		const palette = barMode === "stacked" ? DEFAULT_BAR_COLORS : DEFAULT_CHART_COLORS;
		const config = {};
		for (const [i, s] of series.entries()) {
			const key = sanitizeKey(s.id);
			config[key] = {
				label: s.label,
				color: s.color || palette[i % palette.length]
			};
		}
		return config;
	}, [series, barMode]);
	return /* @__PURE__ */ jsx("div", {
		className: cn(barChartVariants({ size }), className),
		role: "img",
		"aria-label": ariaLabel || "Bar chart",
		...props,
		children: /* @__PURE__ */ jsxs("div", {
			className: "flex h-full gap-1",
			children: [yAxisLabel && /* @__PURE__ */ jsx("div", {
				className: "flex items-center justify-center pb-6",
				children: /* @__PURE__ */ jsx("span", {
					className: "text-xs font-medium text-muted-foreground whitespace-nowrap",
					style: {
						writingMode: "vertical-rl",
						transform: "rotate(180deg)"
					},
					children: yAxisLabel
				})
			}), /* @__PURE__ */ jsxs("div", {
				className: "flex-1 flex flex-col min-w-0",
				children: [
					legendPosition === "top" && /* @__PURE__ */ jsx("div", {
						className: "flex justify-end pb-2",
						children: /* @__PURE__ */ jsx(WrapperChartLegend, {
							series,
							position: "top",
							onSeriesHover: setHighlightedSeries,
							highlightedSeries
						})
					}),
					/* @__PURE__ */ jsxs("div", {
						className: "flex-1 flex",
						children: [/* @__PURE__ */ jsx(ChartContainer, {
							config: chartConfig,
							className: "flex-1 min-h-0 aspect-auto",
							children: /* @__PURE__ */ jsxs(BarChart, {
								data: chartData,
								margin: {
									top: 8,
									right: 8,
									bottom: xAxisLabel ? 20 : 0,
									left: 0
								},
								children: [
									/* @__PURE__ */ jsx(CartesianGrid, {
										strokeDasharray: "0",
										vertical: false,
										className: "stroke-border"
									}),
									showXAxis && /* @__PURE__ */ jsx(XAxis, {
										dataKey: "label",
										tickLine: false,
										axisLine: false,
										tickMargin: 8,
										tick: {
											fill: "var(--muted-foreground)",
											fontSize: 12
										}
									}),
									showYAxis && /* @__PURE__ */ jsx(YAxis, {
										tickLine: false,
										axisLine: false,
										tickMargin: 8,
										tick: {
											fill: "var(--muted-foreground)",
											fontSize: 12
										},
										tickFormatter: yAxisFormat,
										ticks: yAxisTicks,
										width: 48
									}),
									showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
										content: /* @__PURE__ */ jsx(ChartTooltipContent, {}),
										cursor: prefersReducedMotion ? false : { fill: "var(--muted)" }
									}),
									legendPosition !== "none" && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
									(barMode === "stacked" ? [...series].reverse() : series).map((s, i) => {
										const key = sanitizeKey(s.id);
										const isTopBar = barMode === "stacked" && i === series.length - 1;
										return /* @__PURE__ */ jsx(Bar, {
											dataKey: key,
											stackId: barMode === "stacked" ? "stack" : void 0,
											fill: `var(--color-${key})`,
											radius: barMode === "stacked" ? isTopBar ? [
												barRadius,
												barRadius,
												0,
												0
											] : [
												0,
												0,
												0,
												0
											] : [
												barRadius,
												barRadius,
												barRadius,
												barRadius
											],
											opacity: getOpacity(s.id),
											style: dimTransition,
											isAnimationActive: !prefersReducedMotion
										}, key);
									})
								]
							})
						}), legendPosition === "right" && /* @__PURE__ */ jsx("div", {
							className: "ps-3 flex items-start pt-2",
							children: /* @__PURE__ */ jsx(WrapperChartLegend, {
								series,
								position: "right",
								onSeriesHover: setHighlightedSeries,
								highlightedSeries
							})
						})]
					}),
					xAxisLabel && /* @__PURE__ */ jsx("div", {
						className: "flex justify-center pt-2",
						children: /* @__PURE__ */ jsx("span", {
							className: "text-xs font-medium text-muted-foreground",
							children: xAxisLabel
						})
					})
				]
			})]
		})
	});
}
BarChart$1.displayName = "BarChart";
//#endregion
export { BarChart$1 as BarChart, barChartVariants };

//# sourceMappingURL=index50.js.map