import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Spinner } from "@/components/ui/spinner";
import { Folder, File } from "lucide-react";
import { useRecoverFile } from "../-hooks/useRecoverFile";
import { FileType } from "@/apis/file";

type RecoverConfirmDialogProps = {
  open: boolean;
  setOpen: (open: boolean) => void;
  data?: any;
  refetch?: () => void;
};

export function RecoverConfirmDialog({
  open,
  setOpen,
  data,
  refetch,
}: RecoverConfirmDialogProps) {
  const { recover, recoverIsPending } = useRecoverFile({
    onSuccess() {
      refetch?.();
      setOpen(false);
    },
  });

  const onSubmit = () => {
    recover(data?.id);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="w-[400px]">
        <DialogHeader>
          <DialogTitle>
            您确定要恢复该{data?.fileType === FileType.FILE ? "文件" : "目录"}？
          </DialogTitle>
          {data?.fileType === FileType.FILE ? (
            <DialogDescription>
              恢复后文件将被恢复到回收站，可以再次删除
            </DialogDescription>
          ) : (
            <DialogDescription>
              恢复后目录下的文件也会一并被恢复，可以再次删除
            </DialogDescription>
          )}
          <div className="mt-1 flex items-center gap-1 text-sm p-2 rounded-md bg-gray-50">
          {data?.fileType === FileType.FILE ? (
            <File size={16} className="text-primary flex-none" />
          ) : (
            <Folder size={16} className="text-amber-500 flex-none" />
          )}
          <span className="break-all">{data?.fileName}</span>
        </div>
        </DialogHeader>

        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">取消</Button>
          </DialogClose>
          <Button type="submit" disabled={recoverIsPending} onClick={onSubmit}>
            {recoverIsPending && <Spinner />}确定
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}