"use client"

import { Button } from "@/components/ui/button";
import { Command, CommandItem } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { TableCell, TableRow } from "@/components/ui/table";
import { cn } from "@/lib/utils";
import { Check } from "lucide-react";
import { useState } from "react";

const CLASSIFICATIONS = [
    "DISPOSABLE",
    "GAYSEX",
    "HOMOSEXUAL",
    "FDGIUHDIFUIOFZH",
  ];

export default function EmailClassificationRow({ domain, ...props }: { domain: string, classification: string }) {
    const [selectClassification, setSelectClassification] = useState(false);
    const [classification, setClassification] = useState(props.classification);
    const [deleted, setDeleted] = useState(false);
  
    return deleted ? null : (
      <TableRow>
        <TableCell>{domain}</TableCell>
        <TableCell>
          <Popover open={selectClassification} onOpenChange={setSelectClassification}>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                role="combobox"
                aria-expanded={selectClassification}
              >{classification}</Button>
            </PopoverTrigger>
            <PopoverContent>
              <Command>
                {CLASSIFICATIONS.map((c) => (
                  <CommandItem
                  key={c}
                  onSelect={() => {
                    setSelectClassification(false);
                    setClassification(c);
                  }}
                >
                    <Check
                      className={cn(
                        "mr-2 h-4 w-4",
                        c == classification
                          ? "opacity-100"
                          : "opacity-0"
                      )}
                    />
                    {c}
                  </CommandItem>
                ))}
              </Command>
            </PopoverContent>
          </Popover>
        </TableCell>
        <TableCell>
          <Button
            variant="destructive"
            onClick={() => setDeleted(true)}
          >Remove</Button>
        </TableCell>
      </TableRow>
    );
  }