import React, { useEffect, useState } from 'react';
import Formulario from '../components/Formulario';
//import Cronometro from '../components/Cronometro';
//import Formulario from '../components/Formulario';
import nos from './listaFluxo.json';
import nodeFinal from './noFinal.json';
import nodeInicial from './noInicial.json';
import Lista from '../components/Lista';
import { INode } from '../types/node';
import style from './App.module.scss';

function App() {
  const [nodes, setNodes] = useState<INode[]>([]);
  const [selecionado, setSelecionado] = useState<INode>();

  function selecionarNode(nodeselecionada: INode) {
    setSelecionado(nodeselecionada);
    setNodes(nodesAnteriores => nodesAnteriores.map(node => ({
      ...node,
      selecionado: node.codigoAtividade === nodeselecionada.codigoAtividade ? true : false
    })))
  }

  function finalizarnode() {
    if(selecionado) {
      setSelecionado(undefined);
      setNodes((nodesAnteriores: any[]) => nodesAnteriores.map(node => {
        if(node.codigoAtividade === selecionado.codigoAtividade) {
          return {
            ...node,
            selecionado: false,
            completado: true
          }
        }
        return node;
      }))
    }
  }
  useEffect(() =>{
    console.log(nos);
  })

 

  return (
  
    <div className={style.AppStyle}>
{/*       <Formulario setNodes={setNodes} /> */}
      <Lista
        nodes={nos.listaEtapas}
        selecionaNode={selecionarNode} 
        noInicial={nodeInicial.noInicial}
        noFinal={nodeFinal.noFinal}      />
   
    </div>
  );
}

export default App;