"use client";
import React, { useCallback } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { FormProvider } from "react-hook-form";
import { FormSubmit } from "@/components/form/form-submit";
import {
    useMediaCreateManyForm,
    MediaCreateManyForm,
    MediaCreateManyFormValues
} from "@/components/dashboard/media/media-create-many-form";
import { EditorLayout, EditorLayoutContent } from "@/components/layout/editor";
import { api } from "@/lib/trpc/client";
import { objectToFormdata } from "@/lib/utils/object-to-formdata";
import { Routes } from "@/config/routes";

export const MediaBulkUpload: React.FC = () => {
    const router = useRouter();

    const form = useMediaCreateManyForm({
        values: {
            data: []
        }
    });

    const createManyMutation = api.media.createMany.useMutation({
        onSuccess() {
            router.push(Routes.DASHBOARD.MEDIA_LIST);
        },
        onError(err) {
            toast.error(err.message || "Der opstod en fejl under upload af medier");
        }
    });

    const handleSubmit = useCallback(async (data: MediaCreateManyFormValues) => {
        await createManyMutation.mutateAsync(
            objectToFormdata(data)
        );
    }, [createManyMutation]);

    return (
        <FormProvider {...form}>
            <EditorLayout>
                <EditorLayoutContent>
                    <MediaCreateManyForm
                      id="bulk-upload"
                      control={form}
                      onSubmit={handleSubmit} />

                    <div className="flex justify-end gap-2 px-4 pt-5">
                        <FormSubmit form="bulk-upload">
                            Create
                        </FormSubmit>
                    </div>
                </EditorLayoutContent>
            </EditorLayout>
        </FormProvider>
    );
};