import { useEffect, useRef } from "react";
import { getMindmapProjectByAi, renderMindMap } from "@repo/mindmap-render";
import { Graph } from "@antv/x6";

export default function Flowchart(props: { data: any }) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const graph = new Graph({
      container: container,
      width: container.clientWidth,
      height: container.clientHeight,
      grid: true,
      background: {
        color: "#f5f5f5",
      },
    });

    const mindmap = getMindmapProjectByAi(props.data);
    console.log(mindmap);
    // 渲染思维导图数据
    // renderMindMap({
    //   graph,
    //   topics: mindmap.topics,
    //   pageSetting: mindmap.pageSetting,
    //   structure: mindmap.structure,
    //   theme: mindmap.theme,
    // });

    return () => {
      graph.dispose();
    };
  }, []);

  return (
    <div className="w-full h-full relative">
      <div className="w-full h-full" ref={containerRef} />
    </div>
  );
}
