import { useEffect, useRef, useState } from "react";
import { Graph, Node } from "@antv/x6";
import img from "@/assets/wf_icon_autohandle.gif";
import { MenuProps } from "antd";
import Port from "./Port";
import Content from "./Content";

export default ({ node, graph }: { node: Node; graph: Graph }) => {
  const [hovered, setHovered] = useState(false);
  const [isSelected, setIsSelected] = useState(false);

  graph?.on("selection:changed", (args) => {
    setIsSelected(graph.isSelected(node) && graph.getSelectedCells().length === 1);
  });

  return (
    <div
      className="flow-node"
      style={{ 
        
        boxShadow: isSelected ? '0 0 0 8px #2941701a' : ''
      }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <Content
        img={img}
        node={node}
        graph={graph}
        selected={isSelected}
        hovered={hovered}
      />

      <Port hovered={hovered} out={false} style={{ left: -7, cursor: "default" }}  node={node} graph={graph} />
      <Port hovered={hovered} style={{ right: -7, cursor: "crosshair" }}  node={node} graph={graph} />
    </div>
  );
};
