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, useSessionStorageState } from "ahooks";

const NoticeNode = ({ node, graph }: { node: Node; graph: Graph }) => {
  const { style, name, text, id } = node.getData();
  const boxRef = useRef<HTMLDivElement>(null);
  const { width: w, height: h } = useSize(boxRef) || node.getSize();
  const [showEdit, setShowEdit] = useState(false);

  const [_tabActiveKey, setTabActiveKey] =
    useSessionStorageState("tabs-active-key");
  const [_, setRemarkActive] = useSessionStorageState("remark-active");
  const [playModeEnable] = useSessionStorageState(
    "playModeEnable",
    {
      listenStorageChange: true,
    }
  );
  const handleEdit = () => {
    setTabActiveKey("4");
    setRemarkActive(id);
  };

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

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

  const strokeWidth = 1;
  return (
    <>
      <div
        className="relative w-full h-full"
        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={style.background}
            stroke="#666"
            strokeWidth={strokeWidth}
          />
          <path
            d={`
              M ${w - 20},${strokeWidth}
              L ${w - 20},${20}
              L ${w - strokeWidth},${20}
              L ${w - 20},${strokeWidth} Z
            `}
            fill={style.background}
            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>
            {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>
          <Input.TextArea
            variant="borderless"
            className="w-full resize-none! flex-1 color-#666"
            value={content}
            key={id}
            readOnly={!!playModeEnable}
            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"],
});
