import { Controller, useWatch } from "react-hook-form";
import FilterField from "./FilterField";

const FilterControllerWithDependency = ({ item, control, reset, errors }) => {
  const dependencyField = useWatch({ control, name: item.dependencyId });

  return (
    <Controller
      name={`${item.id}`}
      control={control}
      render={({ field: { value, name, onBlur, onChange } }) => {
        return (
          <FilterField
            item={item}
            filterParameters={value}
            handleChange={onChange}
            handleBlur={onBlur}
            dependencyFieldValue={dependencyField}
            resetForm={() => reset()}
            errors={errors}
          />
        );
      }}
    />
  );
};
export default FilterControllerWithDependency;
