import type { Table } from '@tanstack/react-table';
import { ChevronDown, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuGroup,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';

type DataTableToolbarProps<TData> = {
    table: Table<TData>;
    globalFilter: string;
    onGlobalFilterChange: (value: string) => void;
    onReset: () => void;
    searchPlaceholder?: string;
};

export function DataTableToolbar<TData>({
    table,
    globalFilter,
    onGlobalFilterChange,
    onReset,
    searchPlaceholder = 'Filter rows...',
}: DataTableToolbarProps<TData>) {
    const hasSorting = table.getState().sorting.length > 0;
    const hasGlobalFilter = globalFilter.length > 0;
    const hasActiveState = hasSorting || hasGlobalFilter;

    return (
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
            <Input
                placeholder={searchPlaceholder}
                value={globalFilter}
                onChange={(event) => onGlobalFilterChange(event.target.value)}
                className="max-w-sm"
                aria-label="Filter table"
            />
            <div className="flex flex-wrap items-center gap-2 sm:ms-auto">
                {hasActiveState ? (
                    <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={onReset}
                    >
                        <X className="size-3.5" />
                        Reset
                    </Button>
                ) : null}
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button type="button" variant="outline">
                            Columns
                            <ChevronDown />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-48">
                        <DropdownMenuGroup>
                            {table
                                .getAllColumns()
                                .filter((column) => column.getCanHide())
                                .map((column) => (
                                    <DropdownMenuCheckboxItem
                                        key={column.id}
                                        checked={column.getIsVisible()}
                                        onCheckedChange={(value) =>
                                            column.toggleVisibility(!!value)
                                        }
                                    >
                                        {column.columnDef.meta?.label ??
                                            column.id}
                                    </DropdownMenuCheckboxItem>
                                ))}
                        </DropdownMenuGroup>
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>
        </div>
    );
}