import React, { useEffect, useState, useRef } from "react";
import { register } from "@antv/x6-react-shape";
import { Graph, Node } from "@antv/x6";
import { Input } from "antd";
import { useSize } from "ahooks";
import { Transform } from "@antv/x6-plugin-transform";
const NoticeNode = ({ node, graph }: { node: Node; graph: Graph }) => {
  const { name, text } = node.getData();
  const boxRef = useRef<HTMLDivElement>(null);
  const { width: w, height: h } = useSize(boxRef) || node.getSize();
  const [showEdit, setShowEdit] = useState(false);
  const tranform = useRef<Transform>();


  const [content, setContent] = useState(text);

  useEffect(() => {
    setContent(text);
  }, [text]);

  useEffect(() => {
    graph.on("node:selected", (args) => {
      if(args.node.id === node.id) {
        if(!tranform.current) {
          tranform.current = new Transform({
            resizing: { enabled: true }
          });
          graph.use(tranform.current);
        } else {
          tranform.current.enable();
        }
        graph.createTransformWidget(node);
      } else {
        graph.clearTransformWidgets();
        tranform.current?.disable();
      }
    });
  }, []);

  const strokeWidth = 1;
  return (
    <>
      <div
        className="relative w-full h-full bg-#eff8ff"
        ref={boxRef}
        onMouseEnter={() => setShowEdit(true)}
        onMouseLeave={() => setShowEdit(false)}
      >
        {/* <svg
          className="absolute top-0 left-0"
          viewBox={`0 0 ${w} ${h}`}
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d={`
              M ${strokeWidth},${strokeWidth}
              L ${w - 20},${strokeWidth}
              L ${w - strokeWidth},${20}
              L ${w - strokeWidth},${h - strokeWidth}
              L ${strokeWidth},${h - strokeWidth}
              L ${strokeWidth},${strokeWidth}
              Z
            `}
            fill='#eff8ff'
            stroke="#666"
            strokeWidth={strokeWidth}
          />
          <path
            d={`
              M ${w - 20},${strokeWidth}
              L ${w - 20},${20}
              L ${w - strokeWidth},${20}
              L ${w - 20},${strokeWidth} Z
            `}
            fill='#eff8ff'
            stroke="#666"
            strokeWidth={strokeWidth}
          />
        </svg> */}
        <div className="absolute w-full h-full flex flex-col">
          <div className="color-#333 px-20px py-4px flex items-center justify-between">
            <span className="truncate leading-22px">{name}</span>
          </div>
          <Input.TextArea
            placeholder="请输入注释内容"
            variant="borderless"
            className="w-full resize-none! flex-1 color-#666"
            value={content}
            onChange={(e) => setContent(e.target.value)}
            onBlur={() => {
              node.prop("update:remark", {
                ...node.getData(),
                text: content,
              });
            }}
          />
        </div>
      </div>
    </>
  );
};

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