'use client';

import { cn } from "../../utils/cn.mjs";
import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
import { ChevronRight } from "lucide-react";
import { useState } from "react";
import { cva } from "class-variance-authority";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/CollapsibleTable/CollapsibleTable.tsx
const collapsibleTableVariants = cva("w-full max-w-full overflow-hidden rounded-lg border bg-card", {
	variants: {
		size: {
			sm: "max-w-lg",
			md: "max-w-2xl",
			lg: "max-w-4xl",
			xl: "max-w-6xl",
			full: "w-full max-w-none"
		},
		variant: {
			default: "border-neutral/20 bg-card",
			dark: "border-[#B5B5B5] bg-[#242424]",
			ghost: "border-transparent bg-transparent",
			outlined: "border-2 border-primary/20 bg-background"
		},
		spacing: {
			none: "",
			sm: "m-2",
			md: "m-4",
			lg: "m-6",
			auto: "m-auto"
		}
	},
	defaultVariants: {
		size: "md",
		variant: "default",
		spacing: "auto"
	}
});
const headerVariants = cva("flex cursor-pointer items-center justify-between p-3 transition-colors duration-200", {
	variants: {
		variant: {
			default: "hover:bg-neutral/5",
			dark: "hover:bg-neutral/10",
			ghost: "hover:bg-primary/5",
			outlined: "hover:bg-primary/5"
		},
		borderStyle: {
			none: "",
			dashed: "border-neutral/20 border-b border-dashed",
			solid: "border-neutral/20 border-b border-solid"
		}
	},
	defaultVariants: {
		variant: "default",
		borderStyle: "dashed"
	}
});
const tableVariants = cva("w-full border-collapse", {
	variants: {
		spacing: {
			none: "border-spacing-0",
			sm: "border-spacing-1",
			md: "border-spacing-2",
			lg: "border-spacing-4"
		},
		layout: {
			auto: "table-auto",
			fixed: "table-fixed"
		}
	},
	defaultVariants: {
		spacing: "md",
		layout: "auto"
	}
});
/**
* CollapsibleTable component that displays tabular data in an expandable/collapsible format.
* It provides a clickable header that controls the visibility of the table content with smooth animations.
*
* Features:
* - Supports both controlled and uncontrolled modes
* - Customizable styling with CVA variants (size, variant, spacing)
* - Multiple className props for granular styling control
* - Custom column rendering and ordering
* - Accessible with proper ARIA attributes and keyboard navigation
* - Responsive design with overflow handling
* - Empty state customization
* - Flexible data structure support
*
* @example
* // Basic usage
* const userData = [
*   { name: 'John Doe', role: 'Developer', experience: '5 years' },
*   { name: 'Jane Smith', role: 'Designer', experience: '3 years' },
* ];
*
* <CollapsibleTable
*   title="Team Members"
*   data={userData}
*   defaultExpanded={true}
* />
*
* @example
* // Advanced usage with custom styling and renderers
* const projectData = [
*   { name: 'Project A', status: 'active', priority: 'high' },
*   { name: 'Project B', status: 'completed', priority: 'medium' },
* ];
*
* const columnRenderers = {
*   status: (value) => (
*     <Badge variant={value === 'active' ? 'success' : 'default'}>
*       {value}
*     </Badge>
*   ),
*   priority: (value) => (
*     <span className={`font-semibold ${
*       value === 'high' ? 'text-red-600' :
*       value === 'medium' ? 'text-yellow-600' : 'text-green-600'
*     }`}>
*       {value}
*     </span>
*   ),
* };
*
* <CollapsibleTable
*   title="Project Dashboard"
*   data={projectData}
*   variant="dark"
*   size="lg"
*   borderStyle="solid"
*   columnRenderers={columnRenderers}
*   headerClassName="bg-slate-800 text-white"
*   tableClassName="bg-slate-900"
*   onExpandToggle={(expanded) => console.log('Table expanded:', expanded)}
* />
*
* @param title - The text or React node displayed in the table header
* @param data - Array of objects representing table rows. Keys become column headers, values become cell content
* @param className - Additional CSS classes for the main container element
* @param headerClassName - Additional CSS classes for the clickable header section
* @param contentClassName - Additional CSS classes for the table content wrapper
* @param tableClassName - Additional CSS classes for the HTML table element
* @param thClassName - Additional CSS classes for table header cells (th elements)
* @param tdClassName - Additional CSS classes for table body cells (td elements)
* @param trClassName - Additional CSS classes for table rows (tr elements)
* @param defaultExpanded - Initial expansion state when component is uncontrolled (default: false)
* @param isExpanded - Controls expansion state when component is controlled. When provided, component becomes controlled
* @param onExpandToggle - Callback function called when expansion state changes. Receives new expanded state as parameter
* @param toggleIcon - Custom React node to display as toggle icon. Defaults to ChevronRight from lucide-react
* @param size - Size variant affecting container max-width: 'sm' | 'md' | 'lg' | 'xl' | 'full'
* @param variant - Visual style variant: 'default' | 'dark' | 'ghost' | 'outlined'
* @param spacing - Container margin spacing: 'none' | 'sm' | 'md' | 'lg' | 'auto'
* @param borderStyle - Header border style when expanded: 'none' | 'dashed' | 'solid'
* @param tableSpacing - Table cell spacing: 'none' | 'sm' | 'md' | 'lg'
* @param tableLayout - CSS table-layout property: 'auto' | 'fixed'
* @param columnRenderers - Object mapping column names to custom render functions. Function receives (value, rowData) and returns ReactNode
* @param disabled - When true, disables click interaction and shows disabled visual state
* @param aria-label - Accessible label for screen readers describing the table purpose
* @param contentId - Custom ID for the table content area. Used for aria-controls. Auto-generated if not provided
*/
const CollapsibleTable = ({ title, data, className, headerClassName, contentClassName, tableClassName, thClassName, tdClassName, trClassName, defaultExpanded = false, isExpanded: controlledExpanded, onExpandToggle, toggleIcon, size, variant, spacing, borderStyle, tableSpacing, tableLayout, columnRenderers, disabled = false, "aria-label": ariaLabel, contentId, ...props }) => {
	const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
	const isExpanded = controlledExpanded ?? internalExpanded;
	const toggleExpanded = () => {
		if (disabled) return;
		const newState = !isExpanded;
		if (onExpandToggle) onExpandToggle(newState);
		else setInternalExpanded(newState);
	};
	const getColumns = (data$1) => {
		if (Array.isArray(data$1) && data$1.length > 0) {
			const allKeys = /* @__PURE__ */ new Set();
			data$1.forEach((item) => {
				if (item && typeof item === "object") Object.keys(item).forEach((key) => allKeys.add(key));
			});
			return Array.from(allKeys);
		}
		return [];
	};
	const tableColumns = getColumns(data);
	const generatedContentId = contentId || `collapsible-table-${Math.random().toString(36).substr(2, 9)}`;
	const renderCellContent = (column, value, row) => {
		if (columnRenderers?.[column]) return columnRenderers[column](value, row);
		return String(value ?? "—");
	};
	return /* @__PURE__ */ jsxs("div", {
		className: cn(collapsibleTableVariants({
			size,
			variant,
			spacing
		}), className),
		"aria-label": ariaLabel,
		...props,
		children: [/* @__PURE__ */ jsxs("div", {
			onClick: toggleExpanded,
			className: cn(headerVariants({
				variant,
				borderStyle: isExpanded ? borderStyle : "none"
			}), headerClassName, disabled && "cursor-not-allowed opacity-50"),
			role: "button",
			tabIndex: disabled ? -1 : 0,
			"aria-expanded": isExpanded,
			"aria-controls": generatedContentId,
			"aria-disabled": disabled,
			children: [/* @__PURE__ */ jsx("p", {
				className: "font-semibold",
				children: title
			}), /* @__PURE__ */ jsx("div", {
				className: cn("transition-transform duration-200", isExpanded && "rotate-90", disabled && "opacity-50"),
				children: toggleIcon ?? /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
			})]
		}), /* @__PURE__ */ jsx(MaxHeightSmoother, {
			isHidden: !isExpanded,
			children: /* @__PURE__ */ jsx("div", {
				id: generatedContentId,
				className: cn("overflow-x-auto p-3", contentClassName),
				role: "region",
				"aria-labelledby": `${generatedContentId}-header`,
				children: /* @__PURE__ */ jsxs("table", {
					className: cn(tableVariants({
						spacing: tableSpacing,
						layout: tableLayout
					}), "border-separate", tableClassName),
					children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
						className: trClassName,
						children: tableColumns.map((column) => /* @__PURE__ */ jsx("th", {
							className: cn("pb-2 text-left font-medium text-sm text-text/70", thClassName),
							children: column
						}, column))
					}) }), /* @__PURE__ */ jsx("tbody", { children: data.map((row, index) => /* @__PURE__ */ jsx("tr", {
						className: cn("bg-neutral/5 transition-colors hover:bg-neutral/10", trClassName),
						children: tableColumns.map((column) => /* @__PURE__ */ jsx("td", {
							className: cn("rounded px-3 py-2 text-sm text-text", tdClassName),
							children: renderCellContent(column, row[column], row)
						}, column))
					}, index)) })]
				})
			})
		})]
	});
};

//#endregion
export { CollapsibleTable };
//# sourceMappingURL=CollapsibleTable.mjs.map