import React, { useState } from 'react';
import { INode } from '../../types/node';
import Botao from '../Botao';
import style from './Formulario.module.scss';
import { v4 as uuidv4 } from 'uuid';

interface Props {
  setNodes: React.Dispatch<React.SetStateAction<INode[]>>
}

function Formulario({ setNodes }: Props) {
  const [tarefa, setTarefa] = useState("");
  function adicionarTarefa(evento: React.FormEvent<HTMLFormElement>) {
    evento.preventDefault();
    setNodes(tarefasAntigas => 
      [
        ...tarefasAntigas,
        {
          codigoAtividade:1, 
          nomeAtividade: 'teste', 
          ordem:1, 
          posicao:1,
          tipo: 1,     
          selecionado: false,
          pais: [1,2]
          
        }
      ]
    )
    setTarefa("");
 
  }

  return (
    <form className={style.novaTarefa} onSubmit={adicionarTarefa}>
 {/*      <div className={style.inputContainer}>
        <label htmlFor="tarefa">
          Adicione um novo estudo
        </label>
        <input
          type="text"
          name="tarefa"
          id="tarefa"
          value={tarefa}
          onChange={evento => setTarefa(evento.target.value)}
          placeholder="O que você quer estudar"
          required
        />
      </div> */}
      <Botao type="submit">
        Adicionar
      </Botao>
    </form>
  )
}

export default Formulario;