import React, { useEffect, useRef } from "react";
import { Layout, ConfigProvider } from "antd";
import styles from "./index.less";
import "./index.less"
import RightToolbar from "./components/RightToolbar";
import HeaderToolbar from "./components/HeaderToolbar"
import { useModel } from "umi";
import Footer from "./components/Footer";
import Config from "./components/Config";
import SvgComponent from "./components/SvgComponent";

export default function MindMap() {
  const { rightToobarActive, initMindMap } = useModel("mindMapModel");
  const graphRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    graphRef.current && initMindMap(graphRef.current);
  }, []);

  useEffect(() => {
    document.addEventListener(
      "mousewheel",
      function (e: any) {
        // 判断是否按下ctrl
        if (e.ctrlKey) {
          // 阻止默认事件
          e.preventDefault();
        }
      },
      { capture: false, passive: false }
    );
    document.addEventListener(
      "keydown",
      function (event) {
        if (
          (event.ctrlKey === true || event.metaKey === true) &&
          (event.keyCode === 61 ||
            event.keyCode === 107 ||
            event.keyCode === 173 ||
            event.keyCode === 109 ||
            event.keyCode === 187 ||
            event.keyCode === 189 ||
            event.keyCode === 80)
        ) {
          event.preventDefault();
        }
      },
      false
    );
  }, []);

  return (
    <ConfigProvider
      // componentSize="small"
      prefixCls="shalu"
      theme={{
        token: {
          colorPrimary: "#1890ff",
        },
      }}
    >
      <SvgComponent/>
      <Layout className="w-100vw h-100vh">
        <Layout.Content className={styles.container + " relative"}>
          <div ref={graphRef} className="w-full h-full"></div>
          <HeaderToolbar/>
          <RightToolbar />
          <Footer />
        </Layout.Content>
        <Layout.Sider className={styles.sider} width={rightToobarActive ? 280 : 0}>
          <Config />
        </Layout.Sider>
      </Layout>
    </ConfigProvider>
  );
}
