import React, { Suspense } from 'react';

import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
// import { renderRoutes } from 'react-router-config';
import { renderRoutes } from '../../utils/routes'
// import BootPage from '../../pages/bootpage';
import {
  Router,
  Switch,
  Route,
  Redirect
} from '@wisdom-utils/runtime';

import { dyRoutes } from '../../routes/config';
// import routeContext from '@ant-design/pro-layout/lib/RouteContext';
// import { Route } from 'react-router-dom';

const pkg = require('../../../package.json');
const config = require('../../../config/config');
const defaultSetting = config.layout;


const createRoute = routes => {
  return (
    <Switch>
      {
        routes.map((route, index) => 
          createFixRoute(route, index)
        )
      }
      <Redirect from='/*' to='/' />
    </Switch>
  );
};
//该组件通过递归的方式，将所有route中带有children路由的父路由进行解构,最终用createBasicRoute函数来渲染
const createFixRoute = (route, index) => {
  const { path, component: RouteComponent, routes } = route;
  if (routes) {
    return (
      <Route
        key={index}
        path={path}
        children={props => {
          let redirectPath = null;
          return <RouteComponent {...props} route={route} routes={route.routes} params={route.params}>
            <Switch>
              {routes.map((child, index2) => {
                const { path: childPath, redirect } = child;
                if (redirect){
                  redirectPath = childPath;
                }
                return createFixRoute({...child, path: path + childPath}, `${index}-${index2}`);
              })}
              <Redirect from={`${path}`} to={`${path}${redirectPath || routes[0].path}`} />
            </Switch>
          </RouteComponent>;
        }}
      />
    );
  } else {
    return createBasicRoute(route, index);
  }
};

const createBasicRoute = (route, index) => {    //  最基础的Router 用法
  const { path, component: Component } = route;
  return <Route exact key={index} path={path} component={props => {
    return <Component {...props} route={route} routes={route.routes} params={route.params}/>;
  }} />;
};


function App(props) {
  const { routes } = dyRoutes(props.menu);
  console.log("routes", routes)
  return (
    <>
      <Helmet
        title={`${(props.global && props.global.title) ||
          defaultSetting.title}`}
      >
        <title>{`${(props.global && props.global.title) ||
          defaultSetting.title}`}</title>
        <link
          rel="shortcut icon"
          href={`https://panda-water.cn/web4/${props.global &&
            props.global.shortcutIcon}`}
        />
        <meta
          name="description"
          content={`${props.global && props.global.title}`}
        />
      </Helmet>
      <Router basename={config.base || pkg.name.toLocaleLowerCase() || ''}>
        <Switch>
        {renderRoutes(dyRoutes(props.menu || []).routes)}
        </Switch>
      </Router>
    </>
  );
}

const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
  menu: state.getIn(['global', 'menu']),
});
export default connect(
  mapStateToProps,
  null,
)(App);
