import { ReactNode } from 'react';
import { FieldError } from 'react-hook-form';

export type FormFieldProps = {
  /**
   * The name of the input
   */
  name: string,
  /**
   * The field optional error object returned by the `useForm` hook.
   * For example:
   * ```typescript
   * const { errors } = useForm<FormValuesType>();
   * [...]
   * <FormField error={errors.myFieldName}>
   *   <input name="myFieldName" ref={register({ required: true })} .../>
   * </FormField>
   * ```
   */
  error?: FieldError,
  /**
   * The mapping function that will be called if {@link error} is set
   * to try to resolve the corresponding message depending on the error type.
   * For example:
   * ```typescript
   * const myFieldNameErrorMessageMapping = (error: FieldError) => {
   *   if (error.type === 'validate') {
   *     return 'myFieldName is not valid, it does not respect the form XXX';
   *   }
   *   // leave the FormField handle other errors
   *   return undefined;
   * }
   * ```
   *
   * Do note that this `errorMessageMapping` should generally by generated by {@link makeErrorMessageMapping}:
   * ```typescript
   * const myFieldNameErrorMessageMapping = makeErrorMessageMapping(
   *   'myFieldName is not valid, it does not respect the form XXX'
   * );
   * ```
   *
   * The usage of `errorMessageMapping` requires the FormField error field to be set in order to be executed
   */
  errorMessageMapping?: (error: FieldError) => string | undefined,
  /**
   * The field content children nodes
   */
  children?: ReactNode,
};