"use client";
import React, { useCallback } from "react";
import { useRouter } from "next/navigation";
import { FormProvider, FieldErrors } from "react-hook-form";
import { serialize as toFormData } from "object-to-formdata";
import { FormSubmit } from "@/components/form/form-submit";
import { api } from "@/lib/trpc/client";
import { MediaForm, useMediaForm, MediaFormValues } from "@/components/dashboard/media/media-form";
import type { AppRouterOutput } from "@/lib/trpc/router";
import { Routes } from "@/config/routes";

type Media = AppRouterOutput["media"]["get"];

type Props = {
    mode: "create" | "update";
    id?: string;
    data?: Media;
};

export const MediaEditor: React.FC<Props> = (props) => {
    const {
        mode,
        id: mediaId,
        data
    } = props;

    const router = useRouter();

    const form = useMediaForm(mode, {
        values: data ? {
            scope: data.scope,
            alt: data.alt || "",
            author: data.author || "",
            caption: data.caption || "",
            file: null!
        } : undefined
    });

    const {
        mutateAsync: createMediaMutation
    } = api.media.create.useMutation({
        onSuccess(media) {
            router.replace(Routes.DASHBOARD.MEDIA_EDIT(media.id));
        }
    });

    const {
        mutateAsync: updateMediaMutation
    } = api.media.update.useMutation();

    const handleSubmit = useCallback(async (data: MediaFormValues) => {
        switch(mode) {
            case "create":
                await createMediaMutation(
                    toFormData({
                        data: data
                    })
                );
                break;

            case "update":
                await updateMediaMutation(
                    toFormData({
                        id: mediaId,
                        data
                    })
                );
                break;
        }

        // TODO: Show success message and redirect
    }, [mode, mediaId, createMediaMutation, updateMediaMutation]);

    const handleError = useCallback((errors: FieldErrors<MediaFormValues>) => {
        // TODO: Show error message
    }, []);

    return (
        <FormProvider {...form}>
            <div className="flex-1 max-w-4xl">
                <div className="px-4">
                    <MediaForm
                      id="media-form"
                      mode={mode}
                      control={form}
                      acceptedFileTypes={["image/*"]}
                      preview={{
                        alt: data?.alt || "",
                        mimeType: data?.mimeType || "",
                        url: data?.url || ""
                      }}
                      onSubmit={handleSubmit}
                      onInvalid={handleError} />
                </div>

                <div className="flex justify-between pt-5 px-4">
                    <div />

                    <FormSubmit form="media-form">
                        {mode === "create" ? "Create media" : "Update media"}
                    </FormSubmit>
                </div>
            </div>
        </FormProvider>
    );
};