panel/components/pages/shield/EmailClassificationRow.tsx

"use client";

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTrigger,
  AlertDialogCancel,
  AlertDialogDescription,
} from "@/components/ui/alert-dialog";
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 { toast } from "@/components/ui/use-toast";
import { deleteEmailClassification, updateEmailClassification } from "@/lib/actions";
import { cn } from "@/lib/utils";
import { Check } from "lucide-react";
import { useState } from "react";

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

export default function EmailClassificationRow({
  domain,
  ...props
}: {
  domain: string;
  classification: string;
}) {
  const [classification, setClassification] = useState(props.classification);
  const [selectClassification, setSelectClassification] = useState(false);
  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={async () => {
                    try {
                      await updateEmailClassification(domain, c);

                      setSelectClassification(false);
                      setClassification(c);
                      toast({
                        title: "Classification updated",
                        description: `${domain} is now classified as ${c}`,
                      });
                    } catch (e) {
                      toast({
                        title: "Failed to update classification",
                        description: String(e),
                        variant: "destructive",
                      });
                    }
                  }}
                >
                  <Check
                    className={cn(
                      "mr-2 h-4 w-4",
                      c == classification ? "opacity-100" : "opacity-0"
                    )}
                  />
                  {c}
                </CommandItem>
              ))}
            </Command>
          </PopoverContent>
        </Popover>
      </TableCell>
      <TableCell>
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button>Remove</Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogDescription>
                Delete classification for {domain}?
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancel</AlertDialogCancel>
              <AlertDialogAction
                onClick={async () => {
                  try {
                    await deleteEmailClassification(domain);
                    setDeleted(true);
                    toast({
                      title: "Classification deleted",
                    });
                  } catch(e) {
                    toast({
                      title: "Failed to delete classification",
                      description: String(e),
                      variant: "destructive",
                    });
                  }
                }}
              >
                Remove
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </TableCell>
    </TableRow>
  );
}