"use client";
import { cn } from "./index3.js";
import { Popover, PopoverPopup, PopoverTrigger } from "./index79.js";
import { Tag } from "./index86.js";
import { CommandEmpty, CommandGroup, CommandItem, CommandList, CommandNamespace } from "./index389.js";
import { Check, ChevronDown, Plus } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/organisms/content/GroupingControls/GroupingControls.tsx
function GroupingControls({ table, groupableColumns: groupableColumnsProp, placeholder = "Group by...", maxLevels, variant, size = "md", className }) {
	const [open, setOpen] = React.useState(false);
	const grouping = table.getState().grouping;
	const allGroupableColumns = React.useMemo(() => {
		return table.getAllColumns().filter((col) => {
			if (groupableColumnsProp) return groupableColumnsProp.includes(col.id);
			return col.getCanGroup();
		}).map((col) => ({
			id: col.id,
			label: typeof col.columnDef.header === "string" ? col.columnDef.header : col.id.charAt(0).toUpperCase() + col.id.slice(1)
		}));
	}, [table, groupableColumnsProp]);
	const isMaxLevelsReached = maxLevels !== void 0 && grouping.length >= maxLevels;
	const displayLabel = React.useMemo(() => {
		if (grouping.length === 0) return placeholder;
		return grouping.map((id) => {
			return allGroupableColumns.find((c) => c.id === id)?.label || id;
		}).join(", ");
	}, [
		grouping,
		allGroupableColumns,
		placeholder
	]);
	const handleSelect = React.useCallback((columnId) => {
		if (grouping.indexOf(columnId) >= 0) {
			const newGrouping = grouping.filter((id) => id !== columnId);
			table.setGrouping(newGrouping);
		} else {
			if (maxLevels !== void 0 && grouping.length >= maxLevels) return;
			const newGrouping = [...grouping, columnId];
			table.setGrouping(newGrouping);
		}
	}, [
		grouping,
		table,
		maxLevels
	]);
	const getSelectionOrder = (columnId) => {
		const index = grouping.indexOf(columnId);
		return index >= 0 ? index + 1 : null;
	};
	const availableColumns = React.useMemo(() => {
		return allGroupableColumns.filter((col) => !grouping.includes(col.id));
	}, [allGroupableColumns, grouping]);
	const handleRemove = React.useCallback((columnId) => {
		const newGrouping = grouping.filter((id) => id !== columnId);
		table.setGrouping(newGrouping);
	}, [grouping, table]);
	const handleAddColumn = React.useCallback((columnId) => {
		if (maxLevels !== void 0 && grouping.length >= maxLevels) return;
		const newGrouping = [...grouping, columnId];
		table.setGrouping(newGrouping);
		setOpen(false);
	}, [
		grouping,
		table,
		maxLevels
	]);
	if (variant === "chips") {
		const addColumnPopover = availableColumns.length > 0 && !isMaxLevelsReached ? /* @__PURE__ */ jsxs(Popover, {
			open,
			onOpenChange: setOpen,
			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
				className: cn("inline-flex items-center justify-center rounded-md", "border border-dashed border-input bg-background", "hover:bg-accent hover:border-solid", "transition-[background-color,border-color] duration-150 ease-out motion-reduce:transition-none", size === "sm" ? "h-6 px-2 text-xs" : "h-7 px-2 text-sm"),
				"aria-label": "Add grouping",
				children: /* @__PURE__ */ jsx(Plus, { className: cn("size-3.5 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-45") })
			}), /* @__PURE__ */ jsx(PopoverPopup, {
				side: "bottom",
				align: "start",
				className: "min-w-[180px] w-max max-w-[280px] p-0",
				children: /* @__PURE__ */ jsx(CommandNamespace, { children: /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No columns available" }), /* @__PURE__ */ jsx(CommandGroup, { children: availableColumns.map((column) => /* @__PURE__ */ jsx(CommandItem, {
					value: column.id,
					onSelect: () => handleAddColumn(column.id),
					className: "cursor-pointer",
					children: column.label
				}, column.id)) })] }) })
			})]
		}) : null;
		return /* @__PURE__ */ jsxs("div", {
			"data-slot": "grouping-controls",
			role: "toolbar",
			"aria-label": "Grouping controls",
			className: cn("flex flex-wrap items-center gap-2", className),
			children: [grouping.length === 0 ? /* @__PURE__ */ jsx("span", {
				className: "text-sm text-muted-foreground",
				children: placeholder
			}) : grouping.map((columnId) => {
				const column = allGroupableColumns.find((c) => c.id === columnId);
				if (!column) return null;
				return /* @__PURE__ */ jsx(Tag, {
					size: size === "sm" ? "sm" : "md",
					removable: true,
					onRemove: () => handleRemove(columnId),
					children: column.label
				}, columnId);
			}), addColumnPopover]
		});
	}
	return /* @__PURE__ */ jsxs(Popover, {
		open,
		onOpenChange: setOpen,
		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
			"data-slot": "grouping-controls",
			"aria-label": "Group by column",
			className: cn("inline-flex items-center justify-between gap-2 whitespace-nowrap", "border border-input bg-background hover:bg-accent hover:text-accent-foreground", "rounded-md font-medium", "transition-[color,background-color,border-color,transform] duration-150 ease-out motion-reduce:transition-none", "active:translate-y-px", size === "sm" ? "h-8 px-3 text-sm" : "h-9 px-3.5 py-2.5 text-sm", className),
			children: [/* @__PURE__ */ jsx("span", {
				className: cn("truncate", grouping.length === 0 && "text-muted-foreground"),
				children: displayLabel
			}), /* @__PURE__ */ jsx(ChevronDown, { className: cn("size-4 shrink-0 opacity-50 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-180") })]
		}), /* @__PURE__ */ jsx(PopoverPopup, {
			side: "bottom",
			align: "start",
			className: "min-w-[200px] w-max max-w-[300px] p-0",
			children: /* @__PURE__ */ jsx(CommandNamespace, { children: /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No groupable columns" }), /* @__PURE__ */ jsx(CommandGroup, { children: allGroupableColumns.map((column) => {
				const isSelected = grouping.includes(column.id);
				const order = getSelectionOrder(column.id);
				const isDisabled = !isSelected && isMaxLevelsReached;
				return /* @__PURE__ */ jsxs(CommandItem, {
					value: column.id,
					onSelect: () => handleSelect(column.id),
					disabled: isDisabled,
					"data-disabled": isDisabled,
					"data-slot": "combobox-item",
					className: cn("flex items-center justify-between gap-2 px-2 py-1.5 cursor-pointer", isSelected && "bg-accent"),
					children: [/* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-2",
						children: [isSelected && /* @__PURE__ */ jsx(Check, {
							className: "size-4 text-primary motion-safe:animate-in motion-safe:zoom-in-75 motion-safe:duration-150",
							"aria-hidden": "true"
						}), /* @__PURE__ */ jsx("span", { children: column.label })]
					}), order !== null && /* @__PURE__ */ jsx("span", {
						className: "inline-flex size-5 items-center justify-center rounded-full bg-primary/10 text-[11px] font-semibold text-primary motion-safe:animate-in motion-safe:zoom-in-75 motion-safe:duration-150",
						children: order
					})]
				}, column.id);
			}) })] }) })
		})]
	});
}
GroupingControls.displayName = "GroupingControls";
//#endregion
export { GroupingControls };

//# sourceMappingURL=index452.js.map