import { useState } from 'react'
import { useTranslation } from 'react-i18next'

import { useDispatch } from 'react-redux'
import { AppDispatch } from '../../redux/store'
import { addTodo } from '../../redux/todoSlice'

const ToDoAdd = () => {
  const [todoDescription, setTodoDescription] = useState('')
  const dispatch = useDispatch<AppDispatch>()
  const { t } = useTranslation(['home', 'buttons'])

  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    setTodoDescription(e.target.value)
  }

  const saveTodo = (): void => {
    dispatch(addTodo(todoDescription))
    setTodoDescription('')
  }
  return (
    <div>
      <input
        placeholder='To Do Item'
        onChange={handleChange}
        value={todoDescription}
      />
      <button onClick={saveTodo}>{t('buttons.ok', { ns: ['buttons'] })}</button>
    </div>
  )
}

export default ToDoAdd