import { useState, useEffect } from "react";
import { NodeType } from "@/enum";
import { nodes, nodeItems } from "@/components/nodes";
import { Graph, Node } from "@antv/x6";

export default function NodeMenu(props: {
  graph?: Graph;
  onChange?: (n?: Node) => void;
  position?: { x: number; y: number };
  hideNodes?: string[];
}) {
  const { graph, hideNodes } = props;
  // 添加节点
  const handleAddNode = (type: NodeType) => {
    const node = nodes.find((item) => item.type === type);
    const { width = 100, height = 100 } = graph?.getGraphArea() || {};
    const rect = graph?.getAllCellsBBox();
    const y = rect ? rect.y + rect.height - 80 : height / 2 - 100;

    const n = graph?.addNode({
      shape: node?.name,
      position: props?.position || {
        x: width / 2 - 150,
        y,
      },
      data: node?.data,
    });

    props?.onChange?.(n);
  };

  return (
    <div className="w-280px flex flex-wrap gap-[8px 12px]">
      {nodeItems
        .filter((item) => !hideNodes?.includes(item.name))
        .map((item) => {
          return (
            <div
              className="w-[38%] border-box h-40px px-12px rounded-8px flex items-center cursor-pointer hover:bg-#eff0f8"
              key={item.key}
              onClick={(e) => {
                handleAddNode(item.key);
              }}
            >
              <img src={item.icon} className="w-24px" />
              <span>{item.text}</span>
            </div>
          );
        })}
    </div>
  );
}
