import { ProConfigProvider, ProLayout } from "@ant-design/pro-components";
import { ConfigProvider } from "antd";
import React, { useMemo, useRef, useState } from "react";
import All from "./All";
import Collect from "./Collect";
import Template from "./Template";
import { TableType } from "@/enum";

export default () => {
  const currentFolder = useRef("root");
  const [updateKey, setUpdateKey] = useState(0);

  const handleChangeFolder = (id: string) => {
    currentFolder.current = id;
  };

  const [pathname, setPathname] = useState("/all/business");
  const routes = [
    {
      path: "/all",
      name: "数据模型",
      icon: <i className="iconfont icon-xitong" />,
      children: [
        {
          path: "/all/business",
          name: "业务模型",
          component: (
            <All
              onChangeCurrentFolder={handleChangeFolder}
              updateKey={updateKey}
              type={TableType.BusinessTable}
              key="1"
            />
          ),
        },
        {
          path: "/all/flow",
          name: "流程模型",
          component: (
            <All
              onChangeCurrentFolder={handleChangeFolder}
              updateKey={updateKey}
              type={TableType.FlowTable}
              key="2"
            />
          ),
        },
      ],
    },
    {
      path: "/recently",
      name: "模型市场",
      icon: <i className="iconfont icon-shijian" />,
      component: <div></div>,
    },
    {
      path: "/template",
      name: "我的模版",
      icon: <i className="iconfont icon-yingyong" />,
      component: <Template />,
    },
    {
      path: "/collect",
      name: "我的收藏",
      icon: <i className="iconfont icon-xihuan" />,
      component: <Collect />,
    },
  ];

  const content = useMemo(() => {
    currentFolder.current = "root";
    let comp: React.ReactNode;
    routes.forEach((item) => {
      if (item.path === pathname) {
        comp = item.component;
      }
      if (item.children) {
        item.children.forEach((child) => {
          if (child.path === pathname) {
            comp = child.component;
          }
        });
      }
    });
    return comp;
  }, [pathname, updateKey]);

  return (
    <div
      id="test-pro-layout"
      style={{
        height: "100vh",
        overflow: "auto",
      }}
    >
      <ProLayout
        headerTitleRender={() => null}
        logo={false}
        title={"数据模型"}
        location={{ pathname }}
        route={{
          routes,
        }}
        bgLayoutImgList={[
          {
            src: "https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png",
            left: 85,
            bottom: 100,
            height: "303px",
          },
          {
            src: "https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png",
            bottom: -68,
            right: -45,
            height: "303px",
          },
          {
            src: "https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png",
            bottom: 0,
            left: 0,
            width: "331px",
          },
        ]}
        menuItemRender={(item, dom) => (
          <div
            onClick={() => {
              setPathname(item.path || "/all");
            }}
          >
            {dom}
          </div>
        )}
      >
        <ProConfigProvider hashed={false}>
          <ConfigProvider
            getTargetContainer={() => {
              return (
                document.getElementById("test-pro-layout") || document.body
              );
            }}
          >
            {content}
          </ConfigProvider>
        </ProConfigProvider>
      </ProLayout>
    </div>
  );
};
