import * as React from 'react'

import {useKeyboardAvoidingView} from '../../hooks'
import {Input} from '../ui/input'

export type TextInputProps = React.ComponentProps<'input'>

function TextInput({...props}: TextInputProps) {
  const inputRef = React.useRef<HTMLInputElement>(null)
  const {onBlur, onFocus} = useKeyboardAvoidingView()

  const _onFocus = React.useCallback(
    (event: React.FocusEvent<HTMLInputElement>) => {
      onFocus(inputRef)
      props.onFocus?.(event)
    },
    [props, onFocus, inputRef]
  )

  const _onBlur = React.useCallback(
    (event: React.FocusEvent<HTMLInputElement>) => {
      onBlur()
      props.onBlur?.(event)
    },
    [props, onBlur]
  )

  return (
    <Input innerRef={inputRef} onFocus={_onFocus} onBlur={_onBlur} {...props} />
  )
}

export {TextInput}