import React, { useEffect } from "react";
import _ from "lodash";
import { FieldArray, change } from "redux-form";
import { useDispatch } from "react-redux";
import { RenderSubFields } from "./renderSubFields";
import { hasOwn } from "../../utils";
export const FieldArrayForm = (props) => {
    const {
        name,
        form,
        formProps,
        parentFieldShowOnValue,
        parentField,
        maxSubField
    } = props;

    const dispatch = useDispatch();

    var showIfHasParentShowValue =
        parentField != false &&
        !_.isEmpty(formProps[form]) &&
        hasOwn(formProps[form].values, parentField) &&
        parentFieldShowOnValue.indexOf(
            formProps[form].values[parentField].toString()
        ) > -1;

    useEffect(() => {
        if (!showIfHasParentShowValue) {
            dispatch(change("appealForm", name, null));
        }
    }, [dispatch, name, showIfHasParentShowValue]);

    return (
        <>
            {" "}
            {showIfHasParentShowValue && (
                <FieldArray
                    name={name}
                    component={RenderSubFields}
                    maxSubField={maxSubField}
                />
            )}
        </>
    );
};