import { Filter } from "lucide-react";
import { Button } from "~/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuCheckboxItem,
	DropdownMenuContent,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
import { useDataTable } from "~/providers/DataTableProvider";

export function DataTableViewOptions<TData>() {
	const { table, columns_titles } = useDataTable<TData>();
	const hidableColumns = table
		.getAllColumns()
		.filter(
			(column) =>
				typeof column.accessorFn !== "undefined" && column.getCanHide(),
		);
	if (hidableColumns.length > 0)
		return (
			<DropdownMenu>
				<DropdownMenuTrigger asChild>
					<Button
						className="ml-auto hidden h-8 lg:flex"
						size="sm"
						variant="outline"
					>
						<Filter className="mr-2 size-4" />
						Filtro
					</Button>
				</DropdownMenuTrigger>
				<DropdownMenuContent align="end" className="w-37.5">
					<DropdownMenuLabel>Filtra colonne</DropdownMenuLabel>
					<DropdownMenuSeparator />
					{hidableColumns.map((column) => {
						return (
							<DropdownMenuCheckboxItem
								checked={column.getIsVisible()}
								className="capitalize"
								key={column.id}
								onCheckedChange={(value) => column.toggleVisibility(!!value)}
							>
								{columns_titles[column.id]}
							</DropdownMenuCheckboxItem>
						);
					})}
				</DropdownMenuContent>
			</DropdownMenu>
		);
	return null;
}
