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 { useRemoveFile } from "@/hooks/use-remove-file";
import { FileStatus, FileType } from "@/apis/file";

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

export function RemoveFileDialog({
  open,
  setOpen,
  data,
  refetch,
}: RemoveFileDialogProps) {
  const { remove, removeIsPending } = useRemoveFile({
    onSuccess() {
      refetch?.();
      setOpen(false);
    },
  });

  const onSubmit = () => {
    remove({
      id: data?.id,
      oldStatus: data?.fileStatus,
      newStatus: FileStatus.INVALID,
    });
  };

  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"
            variant="destructive"
            disabled={removeIsPending}
            onClick={onSubmit}
          >
            {removeIsPending && <Spinner />}确定
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}