text: import React, { useEffect, useState } from 'react';
  import { Link, useHistory } from 'react-router-dom';
  import PageDefault from '../../../components/PageDefault';
  import FormField from '../../../components/FormField';
  import useForm from '../../../hooks/useForm';
  import Button from '../../../components/Button';
  import categoriasRepository from '../../../repositories/categorias';
  import videosRepository from '../../../repositories/videos';
  
  function CadastroVideo() {
    const history = useHistory();
    const [categorias, setCategorias] = useState([]);
    const categoryTitles = categorias.map(({ titulo }) => titulo);
    const { handleChange, values } = useForm({
      titulo: 'Video padrão',
      url: 'https://www.youtube.com/watch?v=jOAU81jdi-c',
      categoria: 'Front End',
    });
  
    useEffect(() => {
      categoriasRepository
        .getAll()
        .then((categoriasFromServer) => {
          setCategorias(categoriasFromServer);
        });
    }, []);
  
    return (
      <PageDefault>
        <h1>Cadastro do Vídeo</h1>
  
        <form onSubmit={(event) => {
          event.preventDefault();
  
          const categoriaEscolhida = categorias.find((categoria) => {
            return categoria.titulo === values.categoria;
          });
  
          videosRepository.create({
            titulo: values.url,
            url: values.url,
            categoriaId: categoriaEscolhida.id,
          })
            .then(() => {
              // eslint-disable-next-line no-console
              console.log('Cadastrou com sucesso!');
              history.push('/');
            });
  
        }}
        >
          <FormField
            label="Titulo do vídeo: "
            type="text"
            name="nome"
            value={values.nome}
            onChange={handleChange}
          />
  
          <FormField
            label="URL"
            name="url"
            value={values.url}
            onChange={handleChange}
          />
  
          <FormField
            label="Categoria"
            name="categoria"
            value={values.categoria}
            onChange={handleChange}
            suggestions={categoryTitles}
          />
          <Button type="submit">
            Cadastrar
          </Button>
        </form>
  
        <Link to="/cadastro/categoria">
          Cadastrar Categoria
        </Link>
      </PageDefault>
    );
  }
  
  export default CadastroVideo;
  