import type { ComponentProps, Ref } from 'react';
import { Controller, get, useFormContext } from 'react-hook-form';
import { KeyboardTypeOptions, TextInput } from 'react-native';
import { TextField } from '../form/TextField';

type FormTextFieldProps = Omit<ComponentProps<typeof TextField>, 'ref'> & {
  // This has to be done to avoid annoying type conflicts with `vue`.
  inputRef?: Ref<TextInput>;
  name: string;
  readOnly?: boolean;
  keyboardType?: KeyboardTypeOptions;
};

export function FormTextField({ name, keyboardType, readOnly, inputRef, ...restOfProps }: FormTextFieldProps) {
  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 } }) => (
        <TextField
          ref={inputRef}
          keyboardType={keyboardType}
          errorText={errorMessage}
          onBlur={onBlur}
          onChangeText={(value) => onChange(value.length === 1 ? value.trim() : value)}
          value={value}
          editable={!readOnly}
          {...restOfProps}
        />
      )}
      name={name}
    />
  );
}