import React, { useLayoutEffect, useRef, useEffect } from 'react';
import { OrgChart } from 'd3-org-chart';
import * as d3 from 'd3';

export const OrgChartComponent = (props, ref) => {
  const d3Container = useRef(null);
  let chart = null;

  function addNode(node) {
    chart.addNode(node);
  }

  props.setClick(addNode);
  

  // We need to manipulate DOM
  useLayoutEffect(() => {
    if (props.data && d3Container.current) {
      if (!chart) {
        chart = new OrgChart();
      }
      props.setChart(chart)
      try {
        chart
        .container(d3Container.current)
        .data(props.data)
        .nodeWidth(props.nodeWidth)
        .nodeHeight(props.nodeHeight)
        .layout("left")
        
        .linkUpdate(function(d, i, arr) {
          d3.select(this)
            .attr("stroke", "#66BAF5")
            .attr("stroke-width", 1)
            .style("stroke-dasharray", ("3, 3"))
        })
        .onNodeClick((d, i, arr) => {
          console.log(d, 'Id of clicked node ');
          props.onNodeClick(d);
        })
        .buttonContent(props.buttonContent)
        .nodeContent(props.nodeContent)
        .render();
        
        chart.expandAll()
      } catch(err) {
        console.log(err);
      }
    }
  }, [props.data, d3Container.current]);
  

  return (
    <div>
      <div ref={d3Container} />
    </div>
  );
};