import React, { useEffect, useRef, useState } from "react";
import { Graph, Node } from "@antv/x6";
import { Button, Dropdown, MenuProps, Input } from "antd";
import { NodeType } from "@/enum";
import { getDropDownItems } from "./utils";

export default ({
  node,
  graph,
  img,
  items,
  hovered,
  selected,
}: {
  node: Node;
  graph: Graph;
  img: string | React.ReactNode;
  hovered: boolean;
  selected: boolean;
  items?: MenuProps["items"];
}) => {
  const { name, type } = node.getData();
  const params = new URL(document.location.href.replace('#', '')).searchParams;
  const mode = params.get("mode") ?? "edit";
  // 删除节点
  const handleDelete = () => {
    graph.removeNode(node);
  };

  return (
    <>
      <div
        className="w-full flex justify-end absolute top--34px left-0"
        style={{ display: (hovered || selected) && mode === "edit" ? "flex" : "none" }}
      >
        {/* <Button
          type="text"
          className="text-primary-dark"
          icon={<DeleteFilled />}
          onClick={handleDelete}
        /> */}
        <Dropdown menu={{ items: items || getDropDownItems(node, graph) }} overlayStyle={{ width: 120 }}>
          <Button
            type="text"
            className="text-primary-dark"
            icon={<i className="iconfont icon-gengduo" />}
          />
        </Dropdown>
      </div>

      {![NodeType.START, NodeType.END].includes(type) ? (
        <div className="flex items-center leading-100px px-20px">
          {typeof img === "string" ? (
            <img src={img} alt="logo" className="w-50px" />
          ) : (
            img
          )}
          <div className="ml-10px">
            <div className="text-#333 text-12px">{name}</div>
          </div>
        </div>
      ) : (
        <>
          <div className="w-full h-full relative flex items-center justify-center">
            {typeof img === "string" ? (
              <img src={img} alt="logo" className="w-50px" />
            ) : (
              img
            )}
          </div>
          <div className="absolute w-full bottom--32px text-center text-#222 max-w-[200px] truncate">
            {name}
          </div>
        </>
      )}
    </>
  );
};
