import { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { SearchInput } from '../../components/Search/SearchInput.js'
import { useFieldActions } from '../../stores/form/useFieldActions.js'
import { useFieldController } from '../../stores/form/useFieldController.js'

export const SearchTokenInput = () => {
  const { t } = useTranslation()
  const { setFieldValue } = useFieldActions()
  const { onChange, onBlur, name, value } = useFieldController({
    name: 'tokenSearchFilter',
  })

  useEffect(
    () => () => {
      setFieldValue('tokenSearchFilter', '')
    },
    [setFieldValue]
  )

  return (
    <SearchInput
      name={name}
      placeholder={t('main.tokenSearch')}
      onChange={(e) => onChange((e.target as HTMLInputElement).value)}
      onBlur={onBlur}
      value={value as string | undefined}
    />
  )
}