import { register } from "@antv/x6-react-shape";
import { EventArgs, Graph, Node } from "@antv/x6";
import { topicData } from "@/config/data";
import { useSizeHook, useShapeProps } from "@/hooks";
import CustomInput from "../CustomInput";
import { useEffect, useMemo, useRef, useState } from "react";
import { PlusOutlined } from "@ant-design/icons";
import { TopicType } from "@/enum";
import { addTopic } from "@/pages/mindmap/mindMap";

import Link from "./Link";
import ExtraModule from "./ExtraModule";
import CustomTag from "@/components/CustomTag";
import { TopicItem } from "@/types";
import { selectTopic } from "@/utils/mindmapHander";
import { Tooltip, Popover } from "antd";
import LinkForm from "./LinkForm";
const component = ({ node, graph }: { node: Node; graph: Graph }) => {
  const {
    fill,
    stroke,
    opacity,
    label,
    text,
    borderSize,
    setMindProjectInfo,
    icons,
    tags,
    extraModules,
    remark,
    href,
    children,
    type,
    collapsed,
    fixedWidth,
    linkTopicId,
  } = node.getData();
  const { size, ref } = useSizeHook();
  const { fillContent, strokeColor, strokeWidth, strokeDasharray } =
    useShapeProps(fill, size, stroke);
  const [selected, setSelected] = useState(false);
  const [showPopover, setShowPopover] = useState(false);
  const [popoverContent, setPopoverContent] = useState<React.ReactNode>();
  const handleSelect = (_args: EventArgs["node:selected"]) => {
    const cells = graph.getSelectedCells();
    setSelected(!!cells.find((item) => item.id === node.id));
  };
  const [showCollapsePoint, setShowCollapsePoint] = useState(collapsed);
  const extraModuleRef = useRef<HTMLDivElement>(null);
  const titleRef = useRef<HTMLDivElement>(null);
  const tagRef = useRef<HTMLDivElement>(null);
  const remarkRef = useRef<HTMLDivElement>(null);

  const padding = useMemo(() => {
    switch (type) {
      case TopicType.main:
        return "14px 28px";
      case TopicType.branch:
        return "8px 16px";
      default:
        return "4px 6px";
    }
  }, [type]);

  const showHrefConfig = () => {
    setShowPopover(true);
    setPopoverContent(
      <LinkForm
        title={href?.title}
        value={href?.value}
        onCancel={() => setShowPopover(false)}
        onConfirm={(data) => {
          setShowPopover(false);
          node.setData({ href: data });
        }}
      />
    );
  };

  // @ts-ignore 绑定一个外部调用方法
  node.extendAttr = {
    showHrefConfig,
  };

  useEffect(() => {
    // graph.createTransformWidget(node);
    // graph.select(node);
    graph.on("node:selected", handleSelect);
    graph.on("node:unselected", handleSelect);
    graph.on("node:resized", handleResize);
    return () => {
      graph.off("node:selected", handleSelect);
      graph.off("node:unselected", handleSelect);
      graph.off("node:resized", handleResize);
    };
  }, []);

  // useEffect(() => {
  //   if (size.height && size.width) {
  //     const w = Math.max(
  //       size.width,
  //       titleRef.current?.clientWidth || 0,
  //       tagRef.current?.clientWidth || 0,
  //       extraModuleRef.current?.clientWidth || 0
  //     );
  //     const h = Math.max(
  //       size.height,
  //       titleRef.current?.clientHeight || 0,
  //       tagRef.current?.clientHeight || 0,
  //       extraModuleRef.current?.clientHeight || 0
  //     );
  //     if (h !== node.size().height || w !== node.size().width) {
  //       node.setData({
  //         width: w,
  //       });
  //       node.size(w, h);
  //     }
  //   }
  // }, [size, titleRef, tagRef, extraModuleRef]);

  const handleResize = () => {
    node.setData({
      fixedWidth: true,
      width: node.size().width,
    });
  };

  const childrenCount = useMemo(() => {
    let count = 0;
    const traverse = (topics: TopicItem[]) => {
      topics.forEach((item) => {
        count++;
        if (item.children) {
          traverse(item.children);
        }
      });
    };

    traverse(children);
    return count;
  }, [children]);

  const handleShowRemark = () => {
    selectTopic(graph, node.data);
    // @ts-ignore
    graph.extendAttr.setRightToolbarActive("remark");
  };

  const handleAddBranch = () => {
    const data = node.getData();
    let topic;
    if (data.type === TopicType.main) {
      topic = addTopic(TopicType.branch, setMindProjectInfo, node);
    } else {
      topic = addTopic(TopicType.sub, setMindProjectInfo, node);
    }

    selectTopic(graph, topic);
  };

  const handleToggleCollapse = () => {
    node.setData({
      collapsed: !collapsed,
    });
  };

  const handleDeleteHeft = () => {
    node.setData({
      href: undefined,
    }, {
      deep: false
    });
  };

  return (
    <>
      {selected && (
        <div
          style={{
            width: `calc(100% + 4px)`,
            height: `calc(100% + 4px)`,
            border: "1.5px solid #239edd",
            position: "absolute",
            top: -2,
            left: -2,
          }}
        />
      )}
      <Popover open={showPopover} content={popoverContent}>
        <div
          className="content relative text-0"
          ref={ref}
          style={{
            minWidth: "100%",
            // minHeight: "100%",
            opacity: opacity / 100,
            border: `solid ${strokeWidth}px ${strokeColor}`,
            background: fillContent,
            borderRadius: borderSize,
            padding,
          }}
          onMouseOver={() => !collapsed && setShowCollapsePoint(true)}
          onMouseLeave={() => !collapsed && setShowCollapsePoint(false)}
        >
          {/* 扩展模块 */}
          {extraModules && (
            <div className="extra" ref={extraModuleRef}>
              <ExtraModule node={node} extraModules={extraModules} />
            </div>
          )}

          {/* 图标、标题、链接等 */}
          <div
            className="flex-1 flex items-center justify-center"
            ref={titleRef}
          >
            <div className="flex items-center text-20px">
              {icons?.map((icon: string) => {
                return (
                  <svg key={icon} className="icon mr-6px" aria-hidden="true">
                    <use xlinkHref={`#${icon}`}></use>
                  </svg>
                );
              })}
            </div>
            <CustomInput
              value={label}
              node={node}
              styles={{
                ...text,
                position: "relative",
                padding: "0",
              }}
              txtStyle={{
                position: "relative",
                flexShrink: 0,
                transform: "translateY(50%)",
                width: "auto",
                ...(fixedWidth ? { maxWidth: "100%" } : {}),
              }}
            />
            <div
              className="flex items-center color-#fff m-l-8px"
              ref={remarkRef}
            >
              {href && (
                <Link
                  link={href}
                  onEdit={showHrefConfig}
                  onDelete={handleDeleteHeft}
                />
              )}
              {remark && (
                <Tooltip color="yellow" title={remark}>
                  <i
                    className="iconfont icon-pinglun1 cursor-pointer ml-4px"
                    onClick={handleShowRemark}
                  />
                </Tooltip>
              )}
              {linkTopicId && (
                <Tooltip color="yellow" title={remark}>
                  <i
                    className="iconfont icon-liangdianlianjie-01 cursor-pointer ml-4px"
                    onClick={handleShowRemark}
                  />
                </Tooltip>
              )}
            </div>
          </div>
          {/* 标签 */}
          <div className="flex items-center justify-center" ref={titleRef}>
            {tags?.map((item: { name: string; color: string }) => {
              return (
                <CustomTag
                  className="text-14px"
                  key={item.name}
                  title={item.name}
                  color={item.color}
                >
                  {item.name}
                </CustomTag>
              );
            })}
          </div>

          {/* 添加主题按钮 */}
          {selected && !children?.length && (
            <div
              className={`
              absolute 
              w-20px 
              h-20px 
              rounded-full 
              right--25px 
              top-50% 
              translate-y-[-50%] 
              flex 
              justify-center 
              items-center 
              text-12px 
              cursor-pointer 
              bg-#eef0f3 
              color-#9aa5b8 
              hover:bg-#067bef 
              hover:color-white`}
              onClick={handleAddBranch}
            >
              <PlusOutlined />
            </div>
          )}
          {type !== TopicType.main && children.length && (
            <div
              className="absolute right--30px top-0 w-30px h-full"
              onMouseOver={() => !collapsed && setShowCollapsePoint(true)}
              onMouseOut={() => !collapsed && setShowCollapsePoint(false)}
            />
          )}
          {/* 折叠按钮 */}
          {type !== TopicType.main && children?.length && showCollapsePoint && (
            <div
              className={`
              absolute
              rounded-full
              bg-white
              top-50%
              translate-y-[-50%]
              cursor-pointer
              hover:bg-#e6e6e6
              text-12px
              flex
              items-center
              justify-center
              ${collapsed ? "w-16px h-16px right--20px" : "w-10px h-10px right--15px"}
             `}
              onClick={handleToggleCollapse}
              style={{
                border: `1px solid ${fill.color1}`,
                color: fill.color1,
              }}
            >
              {collapsed && childrenCount}
            </div>
          )}
        </div>
      </Popover>
    </>
  );
};

// 主题节点
register({
  shape: "mind-map-topic",
  width: 206,
  height: 70,
  effect: ["data"],
  component: component,
});

const baseNode = {
  shape: "mind-map-topic",
  data: {
    label: "",
    ...topicData,
  },
};

export default baseNode;
