import React from "react";
import { createRoot, Root } from "react-dom/client";
import { Dropdown } from "antd";
import { Graph, ToolsView, EdgeView } from "@antv/x6";
import type { MenuProps } from "antd";
import { menuHander } from "./hander";
import { mindmapMenuHander } from "./mindmapHander";
import InsetCss from "insert-css";
import { TopicType } from "@/enum";

export class ContextMenuTool extends ToolsView.ToolItem<
  EdgeView,
  ContextMenuToolOptions
> {
  private timer: number | null = null;
  private root: Root | null = null;

  private toggleContextMenu(visible: boolean, e?: MouseEvent) {
    this.root?.unmount();
    document.removeEventListener("mousedown", this.onMouseDown);
    if (visible && e) {
      const { sx, sy } = this.graph.scale();
      let offsetX = e.offsetX * sx,
        offsetY = e.offsetY * sy;
      if (!this.cell.isNode()) {
        return;
      }

      // 非页面节点需要获取当前节点位置 + 节点本身偏移位置
      if (this.cell.data?.type) {
        const { x, y } = this.graph.options;
        const { x: x1, y: y1 } = this.cell.getPosition();
        offsetX = x + x1 + e.offsetX;
        offsetY = y + y1 + e.offsetY;
      } else if (this.cell.isNode() && !this.cell.getData()?.isPage) {
        const { x, y } = this.cell.getPosition();
        offsetX = x * sx + e.offsetX * sx;
        offsetY = y * sy + e.offsetY * sy;
      }
      this.root = createRoot(this.container);
      const items = this.options.menu?.map((item: any) => {
        if (!item) return item;
        return {
          ...item,
          disabled:
            typeof item?.disabled === "function" ? item.disabled(this) : false,
          children: item?.children?.map((c: any) => ({
            ...c,
            disabled:
              typeof item?.disabled === "function"
                ? item.disabled(this)
                : false,
            onClick: () => {
              c?.onClick?.call(this, this, e);
            },
          })),
          onClick: () => {
            setTimeout(() => {
              item?.onClick?.call(this, this, e);
            }, 200);
          },
        };
      });

      InsetCss(`
        .ant-dropdown-menu-submenu-expand-icon {
          top: 4px
        }`);

      this.root.render(
        <Dropdown
          open={true}
          trigger={["contextMenu"]}
          menu={{ items }}
          align={{ offset: [offsetX, offsetY] }}
        >
          <span />
        </Dropdown>
      );
      document.addEventListener("mousedown", this.onMouseDown);
    }
  }

  private onMouseDown = () => {
    this.timer = window.setTimeout(() => {
      this.toggleContextMenu(false);
    }, 200);
  };

  private onContextMenu({ e }: { e: MouseEvent }) {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = 0;
    }
    console.log(e, this);
    this.toggleContextMenu(true, e);
  }

  delegateEvents() {
    this.cellView.on("cell:contextmenu", this.onContextMenu, this);
    // this.graph.on("blank:contextmenu", this.onContextMenu, this);
    return super.delegateEvents();
  }

  protected onRemove() {
    this.cellView.off("cell:contextmenu", this.onContextMenu, this);
  }
}

ContextMenuTool.config({
  tagName: "div",
  isSVGElement: false,
});

export interface ContextMenuToolOptions extends ToolsView.ToolItem.Options {
  menu: MenuProps["items"];
}

Graph.registerEdgeTool("contextmenu", ContextMenuTool, true);
Graph.registerNodeTool("contextmenu", ContextMenuTool, true);

interface MenuItem {
  key?: string;
  label?: string;
  type?: "divider";
  icon?: string;
  fastKey?: string;
  handler?: (tool: ContextMenuTool, e: MouseEvent) => void;
  disabled?: (tool: ContextMenuTool) => boolean;
  children?: MenuItem[];
}

// [复制、剪切、粘贴、复用、删除、设为默认样式],[置于顶层、置于底层、上移一层、下移一层]，[锁定]，[全选],[导出所选图形为PNG、复制所选图形为图片]
const commonMenuData: MenuItem[] = [
  { key: "copy", label: "复制", fastKey: "Ctrl+C", handler: menuHander.copy },
  { key: "cut", label: "剪切", fastKey: "Ctrl+X", handler: menuHander.cut },
  { key: "paste", label: "粘贴", fastKey: "Ctrl+V", handler: menuHander.paste },
  {
    key: "duplicate",
    label: "复用",
    fastKey: "Ctrl+D",
    handler: menuHander.duplicate,
  },
  {
    key: "delete",
    label: "删除",
    fastKey: "Delete/Backspace",
    handler: menuHander.delete,
  },
  {
    key: "setDefaultStyle",
    label: "设为默认样式",
    handler: menuHander.defaultStyle,
  },
  { type: "divider" },
  {
    key: "top",
    label: "置于顶层",
    fastKey: "Ctrl+]",
    icon: "icon-zhiding1",
    handler: menuHander.top,
  },
  {
    key: "bottom",
    label: "置于底层",
    fastKey: "Ctrl+[",
    icon: "icon-zhidi1",
    handler: menuHander.bottom,
  },
  {
    key: "up",
    label: "上移一层",
    fastKey: "Ctrl+Shift+]",
    icon: "icon-shangyiyiceng1",
    handler: menuHander.up,
  },
  {
    key: "down",
    label: "下移一层",
    fastKey: "Ctrl+Shift+[",
    icon: "icon-xiayiyiceng1",
    handler: menuHander.down,
  },
  { type: "divider" },
  {
    key: "lock",
    label: "锁定",
    fastKey: "Ctrl+L",
    icon: "icon-lock",
    handler: menuHander.lock,
  },
  {
    key: "unlock",
    label: "解锁",
    fastKey: "Ctrl+Shift+L",
    icon: "icon-unlock",
    handler: menuHander.unlock,
  },
  { type: "divider" },
  {
    key: "selectAll",
    label: "全选",
    fastKey: "A",
    handler: menuHander.selectAll,
  },
  { type: "divider" },
  {
    key: "export",
    label: "导出所选图形为PNG",
    icon: "icon-tupian",
    handler: menuHander.exportImage,
  },
  {
    key: "copyAsImage",
    label: "复制所选图形为图片",
    handler: menuHander.copyAsImage,
  },
];

const edgeMenuData: MenuItem[] = [
  ...commonMenuData.toSpliced(6, 0, {
    key: "resetDefaultStyle",
    label: "恢复默认样式",
    handler: menuHander.resetStyle,
  }),
];

const nodeMenuData: MenuItem[] = [...commonMenuData];

const lockMenuData: MenuItem[] = [
  { key: "paste", label: "粘贴", fastKey: "Ctrl+V", handler: menuHander.paste },
  { type: "divider" },
  {
    key: "unlock",
    label: "解锁",
    fastKey: "Ctrl+Shift+L",
    icon: "icon-lock",
    handler: menuHander.unlock,
  },
  { type: "divider" },
  {
    key: "selectAll",
    label: "全选",
    fastKey: "A",
    handler: menuHander.selectAll,
  },
];

const pageMenuData: MenuItem[] = [
  {
    key: "paste",
    label: "粘贴",
    fastKey: "Ctrl+V",
    handler: menuHander.paste,
  },
  { key: "1", type: "divider" },
  {
    key: "zoomIn",
    label: "放大",
    fastKey: "Ctrl+(+)",
    icon: "icon-fangda",
    handler: menuHander.zoomIn,
  },
  {
    key: "zoomOut",
    label: "缩小",
    fastKey: "Ctrl+(-)",
    icon: "icon-suoxiao",
    handler: menuHander.zoomOut,
  },
  {
    key: "resetView",
    label: "重置视图缩放",
    handler: menuHander.resetView,
  },
  { key: "2", type: "divider" },
  {
    key: "selectAll",
    label: "全选",
    fastKey: "A",
    handler: menuHander.selectAll,
  },
  { key: "3", type: "divider" },
  {
    key: "createLine",
    label: "创建连线",
    fastKey: "L",
    handler: menuHander.createLine,
  },
  {
    key: "insertImage",
    label: "插入图片",
    fastKey: "I",
    handler: menuHander.insertImage,
  },
];

const LabelComponent = ({ item }: { item: MenuItem }) => {
  return (
    <div className="w-150px flex items-center justify-between">
      <span>
        <span className="inline-block w-20px">
          {item.icon && <i className={`iconfont mr-8px ${item.icon}`} />}
        </span>
        {item.label}
      </span>
      <span className="text-12px color-#a6b9cd">{item.fastKey}</span>
    </div>
  );
};

const getMenuData = (menuData: MenuItem[]): MenuProps["items"] => {
  const menu = menuData.map((item) => {
    if (item.type === "divider") return item;
    return {
      key: item.key,
      label: <LabelComponent item={item} />,
      onClick: item.handler,
      disabled: item?.disabled,
      children: item.children ? getMenuData(item.children) : undefined,
    };
  });
  return menu as MenuProps["items"];
};

const topicMenuData: MenuItem[] = [
  {
    key: "addChild",
    label: "新增子主题",
    fastKey: "Tab",
    handler: mindmapMenuHander.addTopic,
  },
  {
    key: "addCorrelation",
    label: "新增同级主题",
    fastKey: "Enter",
    handler: mindmapMenuHander.addPeerTopic,
    disabled: (tool) => !tool.cell.data?.parentId,
  },
  {
    key: "addParent",
    label: "新增父主题",
    fastKey: "Shift-Tab",
    handler: mindmapMenuHander.addParentTopic,
    disabled: (tool) => !tool.cell.data?.parentId,
  },
  { type: "divider" },
  {
    key: "insert",
    label: "插入",
    children: [
      {
        key: "link",
        label: "关联线",
        fastKey: "Ctrl+L",
        handler: mindmapMenuHander.addCorrelationEdge,
      },
      {
        key: "remark",
        label: "备注",
        fastKey: "Ctrl+R",
        handler: mindmapMenuHander.addRemark,
      },
      {
        key: "href",
        label: "链接",
        fastKey: "Ctrl+K",
        handler: mindmapMenuHander.addHref,
      },
      // {
      //   key: "topicLink",
      //   label: "主题链接",
      //   handler: mindmapMenuHander.addTopicLink
      // },
      {
        key: "image",
        label: "图片",
        fastKey: "Ctrl+Shift+I",
        handler: mindmapMenuHander.addImage,
      },
      {
        key: "tag",
        label: "标签",
        fastKey: "Alt+R",
        handler: mindmapMenuHander.addTag,
      },
      {
        key: "icon",
        label: "图标",
        fastKey: "Alt+C",
        handler: mindmapMenuHander.addIcon,
      },
      {
        key: "code",
        label: "代码块",
        handler: mindmapMenuHander.addCode,
      },
    ],
  },
  {
    key: "chooseTopic",
    label: "选择主题",
    children: [
      {
        key: "sameLevel",
        label: "选择当前分支同级主题",
        handler: mindmapMenuHander.chooseSameLevel,
      },
      {
        key: "allSameLevel",
        label: "选择所有分支统计主题",
        handler: mindmapMenuHander.chooseAllSameLevel,
      },
    ],
  },
  { type: "divider" },
  {
    key: "copy",
    label: "复制",
    fastKey: "Ctrl+C",
    handler: mindmapMenuHander.copy,
  },
  {
    key: "cut",
    label: "剪切",
    fastKey: "Ctrl+X",
    handler: mindmapMenuHander.cut,
  },
  {
    key: "paste",
    label: "粘贴",
    fastKey: "Ctrl+V",
    handler: mindmapMenuHander.paste,
  },
  {
    key: "delete",
    label: "删除",
    fastKey: "Del",
    handler: mindmapMenuHander.delete,
    disabled: (tool) => tool.cell.data.type === TopicType.main,
  },
  {
    key: "deleteCurrent",
    label: "删除当前主题",
    fastKey: "Ctrl+Del",
    handler: mindmapMenuHander.deleteCurrent,
    disabled: (tool) => tool.cell.data?.type === TopicType.main,
  },
  { type: "divider" },
  {
    key: "exportImage",
    label: "导出当前主题为图片",
    handler: mindmapMenuHander.exportImage,
  },
  // {
  //   key: "copyImage",
  //   label: "复制当前主题为图片",
  //   handler: mindmapMenuHander.copyImage
  // },
];

// 节点右键菜单
export const nodeMenu = getMenuData(nodeMenuData);
// 边线右键菜单
export const edgeMenu = getMenuData(edgeMenuData);
// 页面右键菜单
export const pageMenu = getMenuData(pageMenuData);
// 上锁节点菜单
export const lockMenu = getMenuData(lockMenuData);
// 思维导图菜单
export const topicMenu = getMenuData(topicMenuData);
