"use client";

import { useRef } from "react";
import { Button } from "@/components/ui/button";
import { ConfirmButton } from "./confirm-button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

type DeleteDialogProps = {
  id: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
};

export default function DeleteDialog({
  id,
  open,
  onOpenChange,
}: DeleteDialogProps) {
  const formRef = useRef<HTMLFormElement>(null);

  const handleDelete = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log(`Deleting app with id: ${id}`);
    onOpenChange(false); // Close dialog after deleting
  };

  const handleHoldComplete = () => {
    if (formRef.current) {
      formRef.current.requestSubmit();
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <form ref={formRef} onSubmit={handleDelete}>
        <DialogContent className="sm:max-w-sm">
          <DialogHeader>
            <DialogTitle>Delete App</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete this app? This action cannot be
              undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <ConfirmButton text="Confirm" onConfirm={handleHoldComplete} />
          </DialogFooter>
        </DialogContent>
      </form>
    </Dialog>
  );
}