import React, { useEffect, useMemo, useRef } from "react";
import { register } from "@antv/x6-react-shape";
import { Graph, Node } from "@antv/x6";
import type { TopicAreaInfo } from "@/type";
import { useSessionStorageState } from "ahooks";

const TopicAreaNode = ({ node, graph }: { node: Node; graph: Graph }) => {
  const { style, name } = node.getData<TopicAreaInfo>();
  const [showEdit, setShowEdit] = React.useState(false);
  const [_tabActiveKey, setTabActiveKey] =
    useSessionStorageState("tabs-active-key");
  const [playModeEnable] = useSessionStorageState(
      "playModeEnable",
      {
        listenStorageChange: true,
      }
    );
  const handleEdit = () => {
    setTabActiveKey("3");
  };
  return (
    <div
      className="w-full h-full"
      style={{
        border: "1px solid #666",
        borderRadius: "4px",
        background: style.background?.includes("#")
          ? `${style.background}88`
          : style.background,
        padding: "10px",
      }}
      onMouseEnter={() => setShowEdit(true)}
      onMouseLeave={() => setShowEdit(false)}
    >
      <div className="color-#fff flex items-center justify-between leading-22px">
        {name}{" "}
        {showEdit && !playModeEnable && (
          <div
            className="edit-btn w-22px h-22px rounded-md flex items-center justify-center bg-#658dbe cursor-pointer"
            onClick={handleEdit}
          >
            <i className="iconfont icon-bianji color-#fff text-12px" />
          </div>
        )}
      </div>
    </div>
  );
};

register({
  shape: "topic-node",
  component: TopicAreaNode,
  width: 300,
  height: 300,
  effect: ["data"],
});