import { cn as e } from "../../../lib/utils.js";
import { computeFlowPaths as t } from "../atoms/compute-flow-paths.js";
import { FlowConnector as n } from "../atoms/flow-connector.js";
import { FlowTile as r } from "../atoms/flow-tile.js";
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
import { MoreHorizontal as s } from "lucide-react";
//#region lib/components/ui/molecules/flow-diagram.tsx
var c = 3, l = 2, u = 5, d = 8, f = 3;
function p({ left: r, right: s, center: l, animate: p = "both", animation: h = "flow", lineStyle: g, size: _ = "md", maxVisible: x, className: S, "aria-label": C = "Flow diagram", ...w }) {
	let T = x?.left ?? u, E = x?.right ?? d, D = p === "both" || p === "left", O = p === "both" || p === "right", k = r.length > 0, A = s.length > 0, j = Math.min(r.length, T) + +(r.length > T), M = Math.min(s.length, E) + +(s.length > E), N = Math.max(1, Math.ceil(j / f)), P = Math.max(1, Math.ceil(M / f)), F = Math.min(r.length, c) + +(r.length > c), I = Math.min(s.length, c) + +(s.length > c), L = v(F), R = v(I), z = t({
		count: L,
		side: "left"
	}), B = t({
		count: R,
		side: "right"
	}), V = t({
		count: N,
		side: "left"
	}), H = t({
		count: P,
		side: "right"
	}), U = "h-[76px] w-12 @md:h-[92px] @md:w-[87px]", W = b(_, Math.max(N, P)), G = {
		width: `${W}px`,
		height: `${y(_, N)}px`
	}, K = {
		width: `${W}px`,
		height: `${y(_, P)}px`
	};
	return /* @__PURE__ */ o("div", {
		"aria-label": C,
		className: e("@container w-full", S),
		"data-slot": "flow-diagram",
		role: "img",
		...w,
		children: [/* @__PURE__ */ o("div", {
			"aria-hidden": !0,
			className: e("mx-auto flex @2xl:hidden w-full @md:max-w-md max-w-80 items-center justify-center gap-1", "@md:[&_[data-slot=flow-tile]]:size-10 [&_[data-slot=flow-tile]]:size-8", "@md:[&_[data-slot=flow-tile]]:rounded-xl [&_[data-slot=flow-tile]]:rounded-lg", "@md:[&_[data-slot=flow-tile]>svg]:size-5 [&_[data-slot=flow-tile]>svg]:size-4", "@md:[&_[data-slot=flow-hub]]:size-16 [&_[data-slot=flow-hub]]:size-12", "@md:[&_[data-slot=flow-hub]_>_span:last-child]:rounded-[12px] [&_[data-slot=flow-hub]_>_span:last-child]:rounded-[8px]", "@md:[&_[data-slot=flow-hub]_svg]:size-7 [&_[data-slot=flow-hub]_svg]:size-6"),
			children: [
				k ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(m, {
					columns: 2,
					hasOverflow: r.length > c,
					items: r.slice(0, c),
					overflowSize: _
				}), /* @__PURE__ */ a(n, {
					animated: D,
					className: e(U),
					clusterSide: "end",
					lineStyle: g,
					paths: z,
					variant: h
				})] }) : null,
				l,
				A ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(n, {
					animated: O,
					className: e(U),
					clusterSide: "start",
					lineStyle: g,
					paths: B,
					variant: h
				}), /* @__PURE__ */ a(m, {
					columns: 2,
					hasOverflow: s.length > c,
					items: s.slice(0, c),
					overflowSize: _
				})] }) : null
			]
		}), /* @__PURE__ */ o("div", {
			"aria-hidden": !0,
			className: "@2xl:grid hidden w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center",
			children: [
				/* @__PURE__ */ a("div", {
					className: "flex min-w-0 items-center justify-end gap-0",
					children: k ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(m, {
						columns: 3,
						hasOverflow: r.length > T,
						items: r.slice(0, T),
						overflowSize: _
					}), /* @__PURE__ */ a(n, {
						animated: D,
						clusterSide: "end",
						lineStyle: g,
						paths: V,
						style: G,
						variant: h
					})] }) : null
				}),
				l,
				/* @__PURE__ */ a("div", {
					className: "flex min-w-0 items-center justify-start gap-0",
					children: A ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(n, {
						animated: O,
						clusterSide: "start",
						lineStyle: g,
						paths: H,
						style: K,
						variant: h
					}), /* @__PURE__ */ a(m, {
						columns: 3,
						hasOverflow: s.length > E,
						items: s.slice(0, E),
						overflowSize: _
					})] }) : null
				})
			]
		})]
	});
}
function m({ items: t, columns: n, hasOverflow: i, overflowSize: c }) {
	let l = t.length + +!!i;
	return /* @__PURE__ */ o("div", {
		className: e("grid shrink-0 justify-center gap-2.5 sm:gap-3", h[Math.max(1, Math.min(n, l))] ?? h[3]),
		children: [t.map((e, t) => /* @__PURE__ */ a("span", { children: e }, `flow-item-${t}`)), i ? /* @__PURE__ */ a(r, {
			size: c,
			variant: "muted",
			children: /* @__PURE__ */ a(s, { "aria-hidden": !0 })
		}) : null]
	});
}
var h = {
	1: "grid-cols-1",
	2: "grid-cols-2",
	3: "grid-cols-3"
}, g = {
	sm: 32,
	md: 40,
	lg: 56
}, _ = 12;
function v(e) {
	return e <= 0 ? 1 : Math.max(1, Math.ceil(e / Math.max(1, Math.min(l, e))));
}
function y(e, t) {
	return t * g[e] + Math.max(0, t - 1) * _;
}
function b(e, t) {
	return Math.round(y(e, t) * .95);
}
//#endregion
export { p as FlowDiagram };
