"use client";
import React from "react"
import { useForm, SubmitHandler } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"
import { Label } from "../ui/label";
import { Input } from "../ui/input"
import { Button } from "../ui/button"
import { createImageWithFormData } from "@/lib/image";

const FormSchema = z.object({
    title: z.string()
        .max(100, {
            message: "100文字以下にしてください。"
        }),
    caption: z.string()
        .max(100, {
            message: "100文字以下にしてください。"
        }),
    file: z.custom<FileList>()
        .refine(value => value.length > 0, "ファイルを選択してください。"),
});

type FormFields = z.infer<typeof FormSchema>;

const ImageForm = () => {
    const {
        register,
        handleSubmit,
        setError,
        formState: { errors, isSubmitting },
    } = useForm<FormFields>({
        defaultValues: {
            title: "",
            caption: "",
        },
        resolver: zodResolver(FormSchema),
    });

    const onSubmit: SubmitHandler<FormFields> = async (values) => {
        try {
            const formData = new FormData();
            formData.set("title", values.title);
            formData.set("caption", values.caption);
            Array.from(values.file).forEach((file, index) => {
                formData.append("files", file);
            });
            const result = await createImageWithFormData(formData);
        } catch (error) {
            setError("root", {
                message: "エラーが発生しました。",
            })
        }
    }

    return (
        <form
            className="flex flex-col gap-2"
            onSubmit={handleSubmit(onSubmit)}>
            <div>
                <Label htmlFor="title">Title</Label>
                <Input type="text" {...register("title")} />
                {errors.title && (
                    <div className="error">{errors.title.message}</div>
                )}
            </div>
            <div>
                <Label htmlFor="caption">Caption</Label>
                <Input type="text" {...register("caption")} />
                {errors.caption && (
                    <div className="error">{errors.caption.message}</div>
                )}
            </div>
            <div>
                <Input
                    type="file"
                    accept="image/*"
                    multiple
                    {...register("file")}
                />
                {errors.file && (
                    <div className="error">{errors.file.message}</div>
                )}
            </div>
            <div>
                <Button
                    disabled={isSubmitting}
                    type="submit"
                >{isSubmitting ? "送信中..." : "送信"}</Button>
                {errors.root && <div className="error">{errors.root.message}</div>}
            </div>
        </form>
    );
}

export default ImageForm;

export async function createImageWithFormData(formData: FormData) {
    const title: string = formData.get("title");
    const caption: string = formData.get("caption");
    const files: File[] = formData.getAll("files") as File[];
    console.log("title", title);
    console.log("caption", caption);
    console.log("files", files);
    // アップロードする処理
}