import React, { useEffect } from "react";
import { Layout } from "antd";
import Menu from "./components/Menu";
import DataModel from "./components/DataModel";
import Navigator from "./components/Navigator";
import { useModel } from "umi";

const { Header, Content, Sider } = Layout;

const App: React.FC = () => {
  const containerRef = React.useRef(null);
  const { initGraph } = useModel("erModel");

  useEffect(() => {
    if (containerRef.current) {
      initGraph?.(containerRef.current);
    }
  }, [containerRef.current]);

  return (
    <Layout className="h-100vh">
      <Header className="bg-white h-100px border-b-1px border-b-solid border-b-gray-200">
        <Menu />
      </Header>
      <Layout>
        <Sider
          width={360}
          style={{ background: "#fff", borderRight: "1px solid #f0f0f0" }}
        >
          <div className="flex flex-col h-full">
            <div className="flex-1">
              <div className="header px-10px py-4px bg-#ddd">数据模型</div>
              <DataModel />
            </div>

            <div className="flex-1 bg-#eee">
              <div className="header px-10px py-4px bg-#ddd">导航</div>
              <Navigator />
            </div>
          </div>
        </Sider>
        <Layout>
          <Content>
            <div id="graph-container" ref={containerRef}></div>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default App;