import {cn} from '@/lib/utils';
import {Form} from 'antd';
import React, {ReactNode} from 'react';
import {
    Controller,
    FieldValues,
    FormProvider,
    useFormContext,
    UseFormReturn,
} from 'react-hook-form';

interface FormWrapperProps<TFieldValues extends FieldValues = FieldValues> {
    children: ReactNode;
    layout: 'horizontal' | 'vertical' | 'inline';
    className?: string;
    form: UseFormReturn<TFieldValues>;
    onSubmit: (data: TFieldValues) => void;
    onKeyDown?: (event: React.KeyboardEvent<HTMLFormElement>) => void;
}

interface FormItemProps {
    children: unknown;
    label?: ReactNode;
    name: string;
    className?: string;
}

const {Item} = Form;

export function FormWrapper<TFieldValues extends FieldValues = FieldValues>({
                                                                                children,
                                                                                layout,
                                                                                form,
                                                                                onSubmit,
                                                                                className,
                                                                                onKeyDown,
                                                                            }: FormWrapperProps<TFieldValues>) {
    return (
        <FormProvider {...form}>
            <Form
                layout={layout}
                onFinish={form.handleSubmit(onSubmit)}
                onKeyDown={onKeyDown}
                className={cn(className)}
            >
                {children}
            </Form>
        </FormProvider>
    );
}

export function FormItem({children, label, name, className}: FormItemProps) {
    const {control} = useFormContext(); // This uses the form context from the parent FormWrapper
    return (
        <Controller
            name={name}
            control={control}
            render={({field, fieldState: {error}}) => {
                // console.log(`error ${field.name}`, error)
                // console.log(`field`, field)
                return (
                    <Item
                        label={label}
                        validateStatus={error ? 'error' : ''}
                        help={error?.message}
                        className={cn(className)}
                    >
                        {/* {typeof children === "function" ? children(field) : children} */}
                        {typeof children === 'function'
                            ? children(field)
                            : React.isValidElement(children)
                                ? React.cloneElement(children, field)
                                : children}
                    </Item>
                )
            }}
        />
    );
}