import { t as e } from "./utils-CHlhTiFC.js";
import { t } from "./dist-C2Jrcfwk.js";
import { t as n } from "./createLucideIcon-CC8mnBIB.js";
import { t as r } from "./chevron-left-CQ0jclS4.js";
import { t as i } from "./chevron-right-CJ5a2pIu.js";
import { P as a } from "./Typography.js";
import { forwardRef as o, useEffect as s, useRef as c, useState as l } from "react";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
var f = n("pause", [["rect", {
	x: "14",
	y: "3",
	width: "5",
	height: "18",
	rx: "1",
	key: "kaeet6"
}], ["rect", {
	x: "5",
	y: "3",
	width: "5",
	height: "18",
	rx: "1",
	key: "1wsw3u"
}]]), p = n("play", [["path", {
	d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
	key: "10ikf1"
}]]), m = t("flex box-border justify-between", {
	variants: { vizWidth: {
		xs: "w-3/4 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4",
		sm: "w-2/3 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4",
		base: "w-1/2 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4",
		lg: "w-1/3 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4",
		xl: "w-1/4 flex-col pr-0 @2xl:pr-2 rtl:pr-0 @2xl:rtl:pl-2 rtl:pl-0 gap-4 min-w-60 grow pb-8 @2xl:pb-4",
		full: "w-full shrink-0 items-start gap-x-8 gap-y-4 mb-4 flex-wrap @2xl:flex-nowrap"
	} },
	defaultVariants: { vizWidth: "base" }
}), h = t("flex box-border grow shrink-0", {
	variants: { vizWidth: {
		xs: "w-1/4 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4",
		sm: "w-1/3 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4",
		base: "w-1/2 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4",
		lg: "w-2/3 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4",
		xl: "w-3/4 pl-0 @2xl:pl-2 rtl:pr-0 rtl:pl-0 @2xl:rtl:pr-2 min-w-60 pb-0 @2xl:pb-4",
		full: "w-full"
	} },
	defaultVariants: { vizWidth: "base" }
}), g = o(({ className: t, vizWidth: n, slides: o, styles: g, classNames: _, slideNo: v = !0, autoScroll: y = !1, ...b }, x) => {
	let S = c(null), C = c([]), w = c(null), [T, E] = l(!1), [D, O] = l(!1), [k, A] = l(1), [j, M] = l(0);
	return s(() => {
		let e = new IntersectionObserver((e) => {
			let t = e.filter((e) => e.isIntersecting).sort((e, t) => t.intersectionRatio - e.intersectionRatio);
			if (t.length > 0) {
				let e = C.current.findIndex((e) => e === t[0].target);
				e !== -1 && A(e + 1);
			}
		}, {
			root: S.current,
			threshold: 1
		});
		return C.current.forEach((t) => {
			t && e.observe(t);
		}), () => {
			C.current.forEach((t) => {
				t && e.unobserve(t);
			});
		};
	}, []), s(() => {
		if (!y) return;
		let e = typeof y == "number" ? y : 5e3, t = j;
		return w.current && clearInterval(w.current), !T && !D && (w.current = setInterval(() => {
			if (t += 50 / e * 100, t >= 100) {
				if (t = 0, M(0), !S.current) return;
				let e = S.current.closest("[dir]")?.getAttribute("dir") === "rtl", n = e ? -280 : 280;
				k === o.length ? (S.current.scrollTo({
					left: e ? S.current.scrollWidth : 0,
					behavior: "smooth"
				}), A(1)) : (S.current.scrollBy({
					left: n,
					behavior: "smooth"
				}), A((e) => e + 1));
			} else M(t);
		}, 50)), () => {
			w.current && clearInterval(w.current);
		};
	}, [
		y,
		D,
		T,
		k,
		o.length,
		j
	]), /* @__PURE__ */ d("div", {
		ref: x,
		onMouseEnter: () => O(!0),
		onMouseLeave: () => O(!1),
		className: "@container w-full",
		children: [y ? /* @__PURE__ */ u("div", {
			className: e("w-full h-4 bg-primary-gray-300 dark:bg-primary-gray-600 rounded-full overflow-hidden mb-4", _?.progressBarBg),
			style: g?.progressBarBg,
			children: /* @__PURE__ */ u("div", {
				className: e("h-full bg-accent-yellow transition-all duration-100 ease-linear", _?.progressBar),
				style: {
					...g?.progressBar,
					width: `${j}%`
				}
			})
		}) : null, /* @__PURE__ */ u("div", {
			ref: S,
			className: e("mr-auto ml-auto mb-0 undp-scrollbar w-full pb-4 gap-6 flex snap-x snap-mandatory scroll-p-0 scroll-pl-0 overflow-x-auto", t),
			...b,
			children: o.map((t, s) => /* @__PURE__ */ d("div", {
				ref: (e) => {
					C.current[s] = e;
				},
				className: `flex box-border flex-wrap w-full shrink-0 snap-start ${n === "full" ? "flex-col items-start" : "flex-row items-stretch"}`,
				children: [/* @__PURE__ */ d("div", {
					style: g?.content,
					className: e(m({ vizWidth: n }), _?.content),
					children: [/* @__PURE__ */ u("div", {
						className: "min-w-60 grow sm:grow-0",
						children: t.content
					}), /* @__PURE__ */ d("div", {
						className: `flex ${v ? "gap-2" : "gap-3"} items-center shrink-0`,
						children: [
							/* @__PURE__ */ u("button", {
								style: g?.arrowButton,
								type: "button",
								className: e("rounded-full pr-1 w-9 h-9 @3xl:w-12 @3xl:h-12 border-0 flex items-center justify-center rtl:rotate-180", k === 1 ? "bg-primary-gray-400 dark:bg-primary-gray-550 cursor-not-allowed" : "cursor-pointer bg-primary-gray-700 dark:bg-primary-gray-100 hover:bg-primary-gray-600 dark:hover:bg-primary-gray-200", _?.arrowButton),
								onClick: () => {
									if (S.current && k !== 1) {
										let e = S.current.closest("[dir]")?.getAttribute("dir") === "rtl" ? 280 : -280;
										A(k - 1), S.current.scrollBy(e, 0);
									}
								},
								children: /* @__PURE__ */ u(r, {
									style: g?.arrows,
									className: e("w-6 h-6 text-primary-white dark:text-primary-gray-700", _?.arrows)
								})
							}),
							v ? /* @__PURE__ */ d(a, {
								marginBottom: "none",
								className: "px-2! shrink-0",
								children: [
									k,
									" / ",
									o.length
								]
							}) : null,
							/* @__PURE__ */ u("button", {
								className: e("rounded-full pl-1 w-9 h-9 @3xl:w-12 @3xl:h-12 border-0 flex items-center justify-center rtl:rotate-180", k === o.length ? "bg-primary-gray-400 dark:bg-primary-gray-550 cursor-not-allowed" : "cursor-pointer bg-primary-gray-700 dark:bg-primary-gray-100 hover:bg-primary-gray-600 dark:hover:bg-primary-gray-200", _?.arrowButton),
								type: "button",
								style: g?.arrowButton,
								onClick: () => {
									if (S.current && k !== o.length) {
										let e = S.current.closest("[dir]")?.getAttribute("dir") === "rtl" ? -280 : 280;
										A(k + 1), S.current.scrollBy(e, 0);
									}
								},
								children: /* @__PURE__ */ u(i, {
									style: g?.arrows,
									className: e("w-6 h-6 text-primary-white dark:text-primary-gray-700", _?.arrows)
								})
							}),
							y ? /* @__PURE__ */ u("button", {
								type: "button",
								style: g?.playPauseButton,
								className: e("rounded-full w-9 h-9 @3xl:w-12 @3xl:h-12 border-2 border-primary-gray-600 dark:border-primary-white flex items-center justify-center cursor-pointer bg-transparent hover:bg-primary-gray-100 dark:hover:bg-primary-gray-600", _?.playPauseButton),
								onClick: () => {
									E(!T);
								},
								children: T ? /* @__PURE__ */ u(p, {
									style: g?.playPauseIcon,
									strokeWidth: 2,
									className: e("w-6 h-6 text-primary-gray-700 dark:text-primary-white", _?.playPauseIcon)
								}) : /* @__PURE__ */ u(f, {
									strokeWidth: 2,
									style: g?.playPauseIcon,
									className: e("w-6 h-6 text-primary-gray-700 dark:text-primary-white", _?.playPauseIcon)
								})
							}) : null
						]
					})]
				}), /* @__PURE__ */ u("div", {
					style: g?.viz,
					className: e(h({ vizWidth: n }), _?.viz),
					children: t.viz
				})]
			}, `slide_no_${s}`))
		})]
	});
});
g.displayName = "VizCarousel";
//#endregion
export { g as t };

//# sourceMappingURL=vizCarousel-jooWE0K9.js.map