import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { save, selectBookById } from './booksSlice';
import { useForm } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router';
import { useAppDispatch } from '../../app/hooks';
import { type InputBook } from './Book';

const Form: React.FC = () => {
  const getBook = useSelector(selectBookById);
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const { register, handleSubmit, reset } = useForm<InputBook>({
    defaultValues: { title: '', author: '', isbn: '' },
  });

  const { id } = useParams<{ id?: string }>();

  useEffect(() => {
    if (id) {
      const book = getBook(parseInt(id, 10));
      reset(book);
    }
  }, [id, reset, getBook]);

  return (
    <form
      onSubmit={handleSubmit((data) => {
        dispatch(save(data));
        navigate('/list');
      })}
    >
      <div>
        <label htmlFor="title">Titel:</label>
        <input type="text" {...register('title')} />
      </div>
      <div>
        <label htmlFor="author">Autor:</label>
        <input type="text" {...register('author')} />
      </div>
      <div>
        <label htmlFor="isbn">ISBN:</label>
        <input type="text" {...register('isbn')} />
      </div>
      <div>
        <button type="submit">speichern</button>
      </div>
    </form>
  );
};

export default Form;
