'use client'
import React, { useEffect } from "react";
import { useRouter } from "next/navigation";
import { UpdateFormProps } from "@/validations/mutual/forms/type";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form } from "@/components/mutual/shadcnui/form";
import { renderInputsBySchema } from "@/lib/renderInputs";
import { Button } from "@/components/mutual/shadcnui/button";

const UpdateForm: React.FC<UpdateFormProps> = ({ schemas, selectedRow, rollbackTo, labels }) => {
    const router = useRouter()
    useEffect(() => {
        if (!selectedRow) {
            router.push(rollbackTo, { scroll: false })
        }
    }, [selectedRow])
    const updateSchema = schemas.update
    const findLabels = Object.entries(updateSchema?.shape || {}).reduce((acc: any, [key, value]: any) => {
        acc[key] = {
            label: labels[key] || key,
            description: value.description,
        }
        return acc
    }, {})
    const handleSubmit = (data: any) => {
        console.log(data)
    }
    const form = useForm<FormData>({
        resolver: zodResolver(updateSchema),
        defaultValues: selectedRow,
    });
    return (
        <div>
            <div>Update Form</div>
            <Form {...form}>
                <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
                    {selectedRow && renderInputsBySchema(findLabels, form)}
                    {selectedRow && <Button type="submit">Submit</Button>}
                </form>
            </Form>
        </div>
    )
}

export default UpdateForm