"use client";

import { useRef, useState, type ComponentProps } from "react";
import { useFormStatus } from "react-dom";
import { Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
} from "@/components/ui/alert-dialog";

export function SubmitButton({
  children,
  confirm,
  ...props
}: ComponentProps<typeof Button> & { confirm?: string }) {
  const { pending } = useFormStatus();
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLButtonElement>(null);
  return (
    <>
      <Button
        {...props}
        ref={ref}
        type="submit"
        size="sm"
        disabled={pending || props.disabled}
        onClick={(event) => {
          if (confirm) {
            event.preventDefault();
            setOpen(true);
          }
        }}
      >
        {pending && <Loader2 className="animate-spin" aria-hidden="true" />}
        {pending ? "处理中…" : children}
      </Button>
      {confirm && (
        <AlertDialog open={open} onOpenChange={setOpen}>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>确认{children}？</AlertDialogTitle>
              <AlertDialogDescription>{confirm}</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>取消</AlertDialogCancel>
              <AlertDialogAction
                variant="destructive"
                onClick={() => ref.current?.form?.requestSubmit(ref.current)}
              >
                确认{children}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      )}
    </>
  );
}