import { ReactElement, ReactNode } from 'react';
import { ControllerProps, ControllerRenderProps, FieldErrors } from 'react-hook-form';
import { FormLabelProps, FormControlProps, HelpTextProps, InputProps as ChakraInputProps, SelectProps as ChakraSelectProps } from '@chakra-ui/react';

import { OrderFormValues } from '../types';

export type FormFieldProps<FormValues = OrderFormValues> = {
  name: ControllerProps<FormValues>['name'] & FormLabelProps['htmlFor'];
  label?: FormLabelProps['children'];
  errors: FieldErrors<FormValues>;
  control: ControllerProps<FormValues>['control'];
  isRequired?: FormControlProps['isRequired'];
  rules?: ControllerProps<FormValues>['rules'];
};

type InputProps<FormValues = OrderFormValues> = Partial<ControllerRenderProps<FormValues> & ChakraInputProps & ChakraSelectProps>;

export type FormInputFieldProps<FormValues = OrderFormValues, Input = (props: InputProps<FormValues>) => ReactNode> = FormFieldProps<FormValues> & {
  Input: Input;
  inputProps?: InputProps<FormValues>;
  help?: HelpTextProps['children'];
};

export type FormControllerFieldProps<FormValues = OrderFormValues> = FormFieldProps<FormValues> & {
  Controller: (props: Pick<ControllerProps<FormValues>, 'control' | 'name' | 'rules'>) => ReactElement;
};