import {
  Link,
  useLocation,
  useNavigate,
  Outlet,
  useAppData,
  useAccessMarkedRoutes,
} from 'umi';
import type { IRoute } from 'umi';
import React, { useMemo } from 'react';
import { ProLayout } from '@ant-design/pro-components';
import logo from '@/assets/logo.png';
import UserDropdown from '@/components/UserDropdown';

// 过滤出需要显示的路由, 这里的filterFn 指 不希望显示的层级
const filterRoutes = (
  routes: any[],
  filterFn: (route: IRoute) => boolean,
): IRoute[] => {
  if (routes.length === 0) {
    return [];
  }

  let newRoutes = [];
  for (const route of routes) {
    const newRoute = { ...route };
    if (filterFn(route)) {
      if (Array.isArray(newRoute.routes)) {
        newRoutes.push(...filterRoutes(newRoute.routes, filterFn));
      }
    } else {
      if (Array.isArray(newRoute.children)) {
        newRoute.children = filterRoutes(newRoute.children, filterFn);
        newRoute.routes = newRoute.children;
      }
      newRoutes.push(newRoute);
    }
  }

  return newRoutes;
};

// 格式化路由 处理因 wrapper 导致的 菜单 path 不一致
const mapRoutes = (routes: IRoute[]) => {
  if (routes.length === 0) {
    return [];
  }
  return routes.map((route) => {
    // 需要 copy 一份, 否则会污染原始数据
    const newRoute = { ...route };
    if (route.originPath) {
      newRoute.path = route.originPath;
    }

    if (Array.isArray(route.routes)) {
      newRoute.routes = mapRoutes(route.routes);
    }

    if (Array.isArray(route.children)) {
      newRoute.children = mapRoutes(route.children);
    }

    return newRoute;
  });
};

export default (props: any) => {
  const location = useLocation();
  const navigate = useNavigate();
  const data = useAppData();
  const { clientRoutes } = data;
  console.log(data);

  // 现在的 layout 及 wrapper 实现是通过父路由的形式实现的, 会导致路由数据多了冗余层级, proLayout 消费时, 无法正确展示菜单, 这里对冗余数据进行过滤操作
  const newRoutes = filterRoutes(clientRoutes, (route) => {
    return route.isLayout || route.isWrapper;
  });
  const [route] = useAccessMarkedRoutes(mapRoutes(newRoutes));

  return (
    <ProLayout
      route={route}
      location={location}
      title={'金科环境数字化平台'}
      navTheme="light"
      siderWidth={256}
      onMenuHeaderClick={(e) => {
        e.stopPropagation();
        e.preventDefault();
        navigate('/');
      }}
      menu={{ locale: false }}
      logo={logo}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || menuItemProps.children) {
          return defaultDom;
        }
        if (menuItemProps.path && location.pathname !== menuItemProps.path) {
          return (
            // handle wildcard route path, for example /slave/* from qiankun
            <Link
              to={menuItemProps.path.replace('/*', '')}
              target={menuItemProps.target}
            >
              {defaultDom}
            </Link>
          );
        }
        return defaultDom;
      }}
      itemRender={(route: any) => (
        <Link to={route.path}>{route.breadcrumbName}</Link>
      )}
      fixSiderbar
      fixedHeader
      rightContentRender={() => <UserDropdown />}
    >
      <Outlet />
    </ProLayout>
  );
};
