import { RefObject, useEffect, useRef } from 'react'
import { TextInputProps, TextInput } from 'react-native'
import { useKeyboardViewReady } from './keyboard_view'

interface AutoFocusAwareTextInputProps extends TextInputProps {
  inputRef?: RefObject<TextInput | null>
}

export const AutoFocusAwareTextInput = (props: AutoFocusAwareTextInputProps) => {
  const { inputRef } = props
  const defaultRef = useRef<TextInput>(null)
  const ref = inputRef || defaultRef
  const keyboardViewReady = useKeyboardViewReady()

  const autoFocus = props.autoFocus

  useEffect(() => {
    if (!autoFocus || !keyboardViewReady) return

    ref?.current?.focus()
  }, [ref, autoFocus, keyboardViewReady])

  return <TextInput ref={ref} {...props} autoFocus={false} />
}