import type { Column } from "@tanstack/react-table";
import { ArrowDown, ArrowUp, Search } from "lucide-react";
import  { useState } from "react";
import { Button } from "../../components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuTrigger,
} from "../../components/ui/dropdown-menu";
import { Input } from "../../components/ui/input";
import { cn } from "../utils";

type SearchableHeaderProps<TData> = {
	column: Column<TData, unknown>;
	title: string;
	searchable?: boolean;
};

export default function SearchableHeader<TData>({
	column,
	title,
	searchable = false,
}: SearchableHeaderProps<TData>) {
	const [open, setOpen] = useState(false);
	return (
		<div className="flex items-center gap-1">
			<Button
				variant="ghost"
				className="px-2"
				onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
			>
				<span className="flex flex-row items-center gap-2">
					{title}
					{column.getIsSorted() === "asc" ? (
						<ArrowUp className="h-4 w-4" />
					) : column.getIsSorted() === "desc" ? (
						<ArrowDown className="h-4 w-4" />
					) : null}
				</span>
			</Button>
			{searchable && (
				<DropdownMenu open={open} onOpenChange={setOpen}>
					<DropdownMenuTrigger asChild>
						<Button variant="ghost" size="icon" className="h-8 w-8">
							<Search
								className={cn(
									"h-4 w-4",
									column.getFilterValue() ? "text-primary" : "",
								)}
							/>
						</Button>
					</DropdownMenuTrigger>

					<DropdownMenuContent align="start" className="w-56 p-2">
						<Input
							autoFocus
							value={(column.getFilterValue() as string) ?? ""}
							onChange={(e) => column.setFilterValue(e.target.value)}
							placeholder={`Search ${title.toLowerCase()}...`}
							className="h-8"
						/>
					</DropdownMenuContent>
				</DropdownMenu>
			)}
		</div>
	);
}