"use client";
import { t as e } from "../../chunks/clsx.js";
import { Checkbox as t } from "./checkboxes/Checkbox.js";
import { FormControl as n } from "./FormControl.js";
import { useDropdown as r } from "../Dropdown.js";
import { useEffect as i, useId as a, useState as o } from "react";
import { Icon as s } from "@clubmed/trident-icons";
import { jsx as c, jsxs as l } from "react/jsx-runtime";
//#region lib/ui/forms/CheckboxSelect.tsx
function u({ children: t, selected: n }) {
	return /* @__PURE__ */ c("span", {
		ref: (e) => {
			e && (e.title = e.textContent ?? "");
		},
		className: e("text-b3 text-black truncate", { "font-semibold": n }),
		children: t
	});
}
function d({ id: d, name: f, label: p, description: m, placeholder: h = "Select...", value: g, options: _, groups: v, onChange: y, disabled: b = !1, required: x = !1, hideRequiredStar: S, validationStatus: C = "default", errorMessage: w, className: T, "data-testid": E, renderValue: D }) {
	let O = a(), k = d ?? O, A = f ?? k, { open: j, toggle: M, containerRef: N, isLeaving: P } = r(), [F, I] = o(g ?? []);
	i(() => {
		g !== void 0 && I(g);
	}, [g]);
	let L = (e, t) => {
		let n = F.includes(t) ? F.filter((e) => e !== t) : [...F, t];
		I(n), y?.(e, n);
	}, R = _ || (v ?? []).flatMap((e) => e.options), z = F.length === 0 ? /* @__PURE__ */ c("span", {
		className: "text-darkGrey",
		children: h
	}) : D ? D(F) : /* @__PURE__ */ c("span", { children: R.filter((e) => F.includes(e.value)).map((e) => e.label).join(", ") }), B = C === "error", V = C === "success", H = b, U = (e) => /* @__PURE__ */ c("div", {
		className: "flex flex-col gap-12",
		children: e.map((e, n) => /* @__PURE__ */ c(t, {
			name: A,
			value: String(e.value),
			checked: F.includes(e.value),
			disabled: b,
			onChange: (t) => L(t, e.value),
			children: /* @__PURE__ */ c(u, {
				selected: F.includes(e.value),
				children: e.label
			})
		}, n))
	});
	return /* @__PURE__ */ c(n, {
		id: k,
		label: p,
		description: m,
		className: T,
		dataName: "CheckboxSelect",
		"data-testid": E,
		disabled: b,
		required: x,
		hideRequiredStar: S,
		validationStatus: C,
		errorMessage: w,
		children: /* @__PURE__ */ l("div", {
			ref: N,
			className: "relative",
			children: [/* @__PURE__ */ l("button", {
				type: "button",
				id: k,
				"aria-haspopup": "listbox",
				"aria-expanded": j,
				"aria-disabled": H,
				disabled: H,
				onClick: M,
				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none text-left flex items-center justify-between gap-8", {
					"bg-white text-black border-middleGrey focus:border-black active:border-black": !H && !B && !V,
					"bg-pearl border-middleGrey text-grey": H,
					"border-red bg-white": B,
					"border-green bg-white": V
				}),
				children: [/* @__PURE__ */ c("span", {
					className: "truncate flex-1",
					children: z
				}), /* @__PURE__ */ l("span", {
					className: "flex items-center gap-8 shrink-0",
					children: [
						B && /* @__PURE__ */ c(s, {
							name: "CrossDefault",
							width: "24px",
							className: "text-red"
						}),
						V && /* @__PURE__ */ c(s, {
							name: "CheckDefault",
							width: "24px",
							className: "text-green"
						}),
						/* @__PURE__ */ c(s, {
							name: "ArrowDefaultDown",
							width: "24px",
							className: e("text-black transition-transform", { "rotate-180": j })
						})
					]
				})]
			}), /* @__PURE__ */ c("div", {
				role: "listbox",
				"aria-multiselectable": "true",
				"aria-hidden": !j && !P,
				className: e("absolute z-10 top-[calc(100%+8px)] left-0 right-0 bg-white rounded-16 border border-lightGrey shadow-md p-12 origin-top will-change-[transform,opacity]", {
					"animate-zoom-in": j,
					"animate-zoom-out": !j && P,
					"opacity-0 scale-90 pointer-events-none": !j && !P
				}),
				children: v ? v.map((t, n) => /* @__PURE__ */ l("div", {
					className: e({ "mt-16 first:mt-0": n > 0 }),
					children: [t.label && /* @__PURE__ */ c("p", {
						className: "text-b4 text-darkGrey font-semibold mb-8 ps-4",
						children: t.label
					}), U(t.options)]
				}, n)) : U(R)
			})]
		})
	});
}
//#endregion
export { d as CheckboxSelect };

//# sourceMappingURL=CheckboxSelect.js.map