import {
  ArrowDownIcon,
  ArrowUpIcon,
  ArrowDownUpIcon,
  // EyeOffIcon,
} from 'lucide-react';
import { Column } from '@tanstack/react-table';

import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  // DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

interface DataTableColumnHeaderProps<TData, TValue>
  extends React.HTMLAttributes<HTMLDivElement> {
  column: Column<TData, TValue>;
  title: string;
}

export function DataTableColumnHeader<TData, TValue>({
  column,
  title,
  className,
}: DataTableColumnHeaderProps<TData, TValue>) {
  if (!column.getCanSort()) {
    return <div className={cn(className)}>{title}</div>;
  }

  return (
    <div className={cn('flex items-center space-x-2 text-xs', className)}>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            size="sm"
            className="data-[state=open]:bg-secondary -ml-3 h-8 rounded-md"
          >
            <span>{title}</span>
            {column.getIsSorted() === 'desc' ? (
              <ArrowDownIcon className="ml-2 h-4 w-4" />
            ) : column.getIsSorted() === 'asc' ? (
              <ArrowUpIcon className="ml-2 h-4 w-4" />
            ) : (
              <ArrowDownUpIcon className="ml-2 h-4 w-4" />
            )}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start">
          <DropdownMenuItem
            onClick={() => column.toggleSorting(false)}
            className="cursor-pointer group"
          >
            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70 group-hover:text-accent-foreground" />
            Asc
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={() => column.toggleSorting(true)}
            className="cursor-pointer group"
          >
            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70 group-hover:text-accent-foreground" />
            Desc
          </DropdownMenuItem>
          {/* <DropdownMenuSeparator />
          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
            <EyeOffIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
            Hide
          </DropdownMenuItem> */}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}

// import {
//   ArrowDownIcon,
//   ArrowUpIcon,
//   ArrowDownUpIcon,
//   // EyeOffIcon,
// } from 'lucide-react';
// import { Column } from '@tanstack/react-table';

// import { cn } from '@/lib/utils';
// import { Button } from '@/components/ui/button';
// import { useState } from 'react';

// interface DataTableColumnHeaderProps<TData, TValue>
//   extends React.HTMLAttributes<HTMLDivElement> {
//   column: Column<TData, TValue>;
//   title: string;
//   sorting?: boolean;
// }

// export function DataTableColumnHeader<TData, TValue>({
//   column,
//   title,
//   className,
//   sorting = true,
// }: DataTableColumnHeaderProps<TData, TValue>) {
//   if (!column.getCanSort()) {
//     return <div className={cn(className)}>{title}</div>;
//   }
//   const [sortDirection, setSortDirection] = useState(false);
//   const handleSort = () => {
//     setSortDirection(!sortDirection);
//     column.toggleSorting(sortDirection);
//   };

//   return (
//     <div className={cn('flex items-center space-x-2 text-xs', className)}>
//       {/* <DropdownMenu> */}
//       {/* <DropdownMenuTrigger asChild> */}
//       {sorting ? (
//         <Button
//           variant="ghost"
//           size="sm"
//           className="hover:bg-transparent data-[state=open]:bg-secondary -ml-3 h-8 text-muted-foreground"
//           onClick={handleSort}
//         >
//           <span>{title}</span>
//           {column.getIsSorted() === 'desc' ? (
//             <ArrowDownIcon className="ml-2 h-4 w-4" />
//           ) : column.getIsSorted() === 'asc' ? (
//             <ArrowUpIcon className="ml-2 h-4 w-4" />
//           ) : (
//             <ArrowDownUpIcon className="ml-2 h-4 w-4" />
//           )}
//         </Button>
//       ) : (
//         <span className='hover:text-accent-foreground cursor-pointer'>{title}</span>
//       )}

//       {/* </DropdownMenuTrigger> */}
//       {/* <DropdownMenuContent align="start">
//           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
//             <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
//             Asc
//           </DropdownMenuItem>
//           <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
//             <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
//             Desc
//           </DropdownMenuItem>
//           {/* <DropdownMenuSeparator />
//           <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
//             <EyeOffIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
//             Hide
//           </DropdownMenuItem>
//         </DropdownMenuContent> */}
//       {/* </DropdownMenu> */}
//     </div>
//   );
// }