import React from 'react';
import { INode } from '../../types/node';
import Item from './item';
import ItemInicial from './itemInicial';
import ItemFinal from './itemFinal';
import style from './Lista.module.scss';
import vector from '../../assets/img/vector.svg';

interface Props {
  nodes: INode[],
  noInicial: INode[],
  noFinal: INode[],
  selecionaNode: (nodeSelecionado: INode) => void 
}


function Lista({noFinal, noInicial,nodes, selecionaNode }: Props) {
  
let element=<ul>
{nodes.map(item => (
  <Item
    selecionaNode={selecionaNode}
    key={item.codigoAtividade}
    {...item}
  />
))}
</ul>;
if(nodes.length === 0) element=<img src={vector}/>;
console.log(nodes);

  return (
    <aside className={style.listanodes}>
      <h2> Etapas  </h2>
      <ul>
        {noInicial.map(itemInicial => (
          <ItemInicial
            selecionaNode={selecionaNode}
            key={itemInicial.codigoAtividade}
            {...itemInicial}
          />
        ))}
      </ul>
      <ul>
        {element}
      </ul>
      <ul>
        {noFinal.map(itemFinal => (
          <ItemFinal
            selecionaNode={selecionaNode}
            key={itemFinal.codigoAtividade}
            {...itemFinal}
          />
        ))}
      </ul>
    </aside>
  )
}

export default Lista;