portabase/src/features/database/import-upload-zone.tsx

"use client";

import {DropZoneFile} from "@/components/common/dropzone-file";
import {useMutation, useQueryClient} from "@tanstack/react-query";
import {useRouter} from "next/navigation";
import {useState} from "react";
import {Loader2} from "lucide-react";
import {ButtonWithLoading} from "@/components/common/button-with-loading";
import {toast} from "sonner";
import {uploadBackupAction} from "@/features/database/import.action";
import {Card, CardContent} from "@/components/ui/card";
import {DatabaseWith} from "@/db/schema/07_database";
import {getFileHeadersBasedOnDbms} from "@/utils/common";

type UploadRetentionZoneProps = {
    onSuccessAction?: () => void;
    database: DatabaseWith;
};

export const UploadBackupZone = ({onSuccessAction, database}: UploadRetentionZoneProps) => {
    const queryClient = useQueryClient();
    const router = useRouter();

    const [isProcessing, setIsProcessing] = useState(false);
    const [file, setFile] = useState<File | null>(null);

    const mutationUpload = useMutation({
        mutationFn: async (file: File) => {

            try {
                setIsProcessing(true);

                const formData = new FormData();
                formData.append("file", file);
                formData.append("databaseId",  database.id);

                const result = await uploadBackupAction(formData)

                const inner = result?.data;
                if (inner?.success) {
                    toast.success(inner.actionSuccess?.message);
                    onSuccessAction?.()
                    queryClient.invalidateQueries({queryKey: ["database-data", database.id]});
                    router.refresh();
                } else {
                    toast.error(inner?.actionError?.message);
                }
            } catch (err) {
                console.error(err);
                toast.error("An error occurred while upload in the backup");
            } finally {
                queryClient.invalidateQueries({queryKey: ["database-data",  database.id]});
                setIsProcessing(false);
            }
        },
    });

    const acceptDbImportFiles = getFileHeadersBasedOnDbms(database.dbms)

    const fileKindDescription = Object.values(acceptDbImportFiles)
        .flat()
        .join(", ");


    return (
        <>
            {isProcessing ? (
                <UploadLoader label="Uploading database backup…"/>
            ) : (
                <DropZoneFile
                    accept={getFileHeadersBasedOnDbms(database.dbms)}
                    maxSize={2 * 1024 * 1024 * 1024}
                    maxFiles={1}
                    description="Import database backup"
                    fileKind={`Database file (${fileKindDescription})`}
                    dragMessage="Click or drag a database dump here"
                    onFileDropAction={(file: File) => setFile(file)}
                />
            )}

            {(!isProcessing && file) && (
                <div className="flex gap-4 justify-end">
                    <ButtonWithLoading
                        onClick={() => mutationUpload.mutateAsync(file)}
                        isPending={false}>
                        Upload
                    </ButtonWithLoading>
                </div>
            )}
        </>
    );
};


const UploadLoader = ({label = "Processing uploading..."}: { label?: string }) => {
    return (
        <Card className="w-full border">
            <CardContent className="flex flex-col items-center justify-center gap-3 py-10 text-muted-foreground">
                <div className="relative">
                    <Loader2 className="w-8 h-8 animate-spin inset-0"/>
                </div>
                <p className="text-sm font-medium">{label}</p>
                <p className="text-xs text-muted-foreground">
                    Do not close this window
                </p>
            </CardContent>
        </Card>
    );
};