"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { api } from "@/trpc/react";
import { toast } from "sonner";
import { useRouter } from "next/navigation";

function DeleteLobbyDialog({ lobbyId }: { lobbyId: string }) {
  const [loading, setLoading] = React.useState(false);
  const { mutateAsync } = api.lobby.delete.useMutation();
  const router = useRouter();
  const handleConfirm = async () => {
    setLoading(true);
    const result = await mutateAsync({ lobbyId });
    if (result) {
      router.push("/");
    } else toast.error("Something went wrong");
    setLoading(false);
  };

  return (
    <AlertDialog>
      <Button asChild variant={"destructive"}>
        <AlertDialogTrigger>Remove Lobby</AlertDialogTrigger>
      </Button>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. You will permanently delete this
            lobby!
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={handleConfirm} disabled={loading}>
            Delete Lobby
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

export default DeleteLobbyDialog;