import React from "react";
import { cx } from '@emotion/css';
import { branchClass } from "./style";
import { AddButton } from "./AddButton";
import { Node } from './nodes';

export function Branch({
  from = null,
  entry = null,
  branchIndex = null,
  controller = null
}: {
  from?: any;
  entry?: any;
  branchIndex?: number | null;
  controller?: any
}) {
  const list: any[] = [];
  for (let node = entry; node; node = node.downstream) {
    list.push(node);
  }

  return (
    <div className={cx(branchClass)}>
      <div className="workflow-branch-lines" />
      {controller}
      <AddButton upstream={from} branchIndex={branchIndex} />
      <div className="workflow-node-list">
        {list.map(item => <Node data={item} key={item.id} />)}
      </div>
    </div>
  );
}