import {
  ChevronDown,
  Check,
  Loader,
  XIcon,
  // EyeOffIcon,
} from 'lucide-react';

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

export function StatusDropDown({
  id,
  currentStatus,
  setStatus,
  className,
  isLoading,
}: {
  id: number;
  currentStatus: string;
  setStatus: (id: number, status: string) => void;
  className?: string;
  isLoading?: boolean;
}) {
  return (
    <div className={cn('flex items-center space-x-2 text-xs', className)}>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="category"
            size="sm"
            className={
              currentStatus === 'active'
                ? 'bg-green-200 border-green-500 text-green-800 hover:bg-green-300 focus-visible:ring-0'
                : currentStatus === 'pendingCreation'
                ? 'border-amber-500 bg-amber-200 text-amber-800 hover:bg-amber-300 focus-visible:ring-0'
                : currentStatus === 'pendingUpdating'
                ? 'border-amber-500 bg-amber-200 text-amber-800 hover:bg-amber-300 focus-visible:ring-0'
                : currentStatus === 'inactive'
                ? 'bg-red-200 border-red-500 text-red-800 hover:bg-red-300 focus-visible:ring-0'
                : '' + `-ml-3 h-8 rounded-md`
            }
            isLoading={isLoading}
            loadingSpinner={false}
          >
            <div className="flex items-center justify-between">
              <span>{currentStatus}</span>
              <ChevronDown className="pl-2 " />
            </div>
          </Button>
          {/* <Button
              variant="ghost"
              size="sm"
              className="data-[state=open]:bg-secondary -ml-3 h-8 rounded-md"
            >
              <span>{currentStatus}</span>
            </Button> */}
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start">
          <DropdownMenuItem
            onClick={() => setStatus(id, 'active')}
            className="cursor-pointer group hover:text-green-500"
          >
            <Check className="mr-2 h-3.5 w-3.5 text-muted-foreground/70 group-hover:text-green-500" />
            Active
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={() => setStatus(id, 'pendingCreation')}
            className="cursor-pointer group hover:text-accent-foreground"
          >
            <Loader className="mr-2 h-3.5 w-3.5 text-muted-foreground/70 group-hover:text-accent-foreground" />
            Pending-Creation
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={() => setStatus(id, 'pendingUpdating')}
            className="cursor-pointer group hover:text-accent-foreground"
          >
            <Loader className="mr-2 h-3.5 w-3.5 text-muted-foreground/70 group-hover:text-accent-foreground" />
            Pending-Updating
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={() => setStatus(id, 'inactive')}
            className="cursor-pointer group hover:text-red-500"
          >
            <XIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70 group-hover:text-red-500" />
            Inactive
          </DropdownMenuItem>
          {/* <DropdownMenuItem
            onClick={() => setStatus(id, 'rejected')}
            className="cursor-pointer group hover:text-red-500"
          >
            <XIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70 group-hover:text-red-500" />
            Rejected
          </DropdownMenuItem> */}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}