import { FC, useEffect, useState } from "react";
import { InputField } from "../forms/Inputs";
import { useFormContext } from "react-hook-form";

type props = {
    index: number,
    option: string,
}
const ItemsField: FC<props> = ({ index, option }) => {
    const [isReadOnly, setReadyOnly] = useState(false);

    const {
        formState: { errors },
        getValues,
    } = useFormContext();
    useEffect(() => {
        if (getValues(`salary_${option}.${index}.${option}_label`) === "Advance repay") {
            setReadyOnly(true)
        }
    }, [option]);


    return (
        <div className="flex gap-4">
            <div>
                <InputField readonly={isReadOnly} name={`salary_${option}.${index}.${option}_label`} errors={errors} />
            </div>
            <div>
                <InputField name={`salary_${option}.${index}.${option}_value`} errors={errors} />
            </div>
        </div>

    )
}

export default ItemsField;