import { useController, useFormContext } from 'react-hook-form';

import { type FormMenuListItemsProps } from './types';
import MenuListItems from './index';

/**
 * Wrapper for MenuListItems for integration with react-hook-form.
 * Automatically handles form state, validations, and errors.
 *
 * @example
 * ```tsx
 * // Inside a FormProvider
 * <FormMenuListItems
 *   name="selectedCountries"
 *   rules={{ required: 'Please select at least one country' }}
 *   menuListItemsProps={{
 *     items: countries,
 *     title: 'Select countries',
 *     maxSelection: 5
 *   }}
 * />
 * ```
 */
const FormMenuListItems = <ItemType extends { id: number; name: string }>({
  name,
  rules,
  menuListItemsProps,
}: FormMenuListItemsProps<ItemType>) => {
  const { control } = useFormContext();
  const { field, fieldState } = useController({
    control,
    name,
    defaultValue: [],
    rules,
  });

  return (
    <MenuListItems
      {...menuListItemsProps}
      value={field.value || []}
      onChange={field.onChange}
      error={!!fieldState.error}
      errorText={fieldState.error?.message}
    />
  );
};

export type { FormMenuListItemsProps };

export default FormMenuListItems;