import { Controller, get, useFormContext } from 'react-hook-form';
import { PhoneNumberField } from '../form/PhoneNumberField';

type FormPhoneNumberFieldProps = React.ComponentPropsWithRef<typeof PhoneNumberField> & {
  name: string;
  readOnly?: boolean;
};

export function FormPhoneNumberField({ name, ...restOfProps }: FormPhoneNumberFieldProps) {
  const form = useFormContext();
  const errors = form?.formState?.errors || '';
  const errorMessage = errors && get(errors, name)?.message;

  return (
    <Controller
      control={form.control}
      render={({ field: { value } }) => (
        <PhoneNumberField errorText={errorMessage} value={value} form={form} name={name} {...restOfProps} />
      )}
      name={name}
    />
  );
}