import { Controller, get, useFormContext } from 'react-hook-form';
import { KeyboardTypeOptions, TextInput } from 'react-native';
import { MaskedTextField } from '../form/MaskedTextField';

type Props = React.ComponentPropsWithRef<typeof MaskedTextField> & {
  inputRef?: React.RefObject<TextInput>;
  name: string;
  readOnly?: boolean;
  keyboardType?: KeyboardTypeOptions;
};

export function FormMaskedTextField({ name, keyboardType, readOnly, inputRef, ...restOfProps }: Props) {
  const form = useFormContext();
  const errors = form?.formState?.errors || '';
  const errorMessage = errors && get(errors, name)?.message;

  return (
    <Controller
      control={form.control}
      render={({ field: { onChange, onBlur, value } }) => {
        return (
          <MaskedTextField
            ref={inputRef}
            keyboardType={keyboardType}
            errorText={errorMessage}
            onBlur={onBlur}
            onChangeText={(value) => onChange(value.length === 1 ? value.trim() : value)}
            value={value}
            editable={!readOnly}
            {...restOfProps}
          />
        );
      }}
      name={name}
    />
  );
}