import { FormikProps, FormikValues } from "formik";
import { ReactNode } from "react";

interface RadioFormProps<T = FormikValues> {
    formikProps: FormikProps<T>;
    id: keyof T & string;
    name: keyof T & string;
    title: string;
    icon?: ReactNode;
    props?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
    className?: string;
    type?: string;
}




export const RadioForm = <T extends FormikValues>({
    formikProps,
    id,
    name,
    title,
    props,
    className
}: RadioFormProps<T>): React.ReactElement => {
    let pathArr = name.split('.');
    let errorValue = pathArr.reduce((prev: any, curr) => prev && prev[curr], formikProps.errors);
    let touchedValue = pathArr.reduce((prev: any, curr) => prev && prev[curr], formikProps.touched);

    return (
        <div
            className={`mb-3 w-full ${formikProps.submitCount ? (errorValue && touchedValue ? 'has-error' : '') : ''}`}>
            <label className="flex w-full   items-center">
                <input type="radio" {...props} name={name} id={id} className={"form-radio peer" + className} />
                <span className={`peer-checked:text-primary font-normal ${className}`}>
                    {title}
                </span>
            </label>
            {formikProps.submitCount ?
                (errorValue && touchedValue ?
                    <div className="mt-[2px] w-full p-1 text-sm text-danger">{errorValue}</div> : <></>
                )
                :
                <> </>
            }
        </div>
    );
};