import React,{useEffect} from 'react';
import { Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import Loading from "../../Loading";
import './index.scss';

const List = Loadable({
  loader: () => import("./Pages/list"),
  loading: Loading,
});
const Detail = Loadable({
  loader: () => import("./Pages/details"),
  loading: Loading,
});
const Sign = Loadable({
  loader: () => import("./Pages/sign"),
  loading: Loading,
});
const New = Loadable({
  loader: () => import("./Pages/new"),
  loading: Loading,
});

function Index(props){
  const pathname = props.history.location.pathname;
  const { project } = props;
  const open_blockchain = project && project.open_blockchain;

  useEffect(() => {
    if (document) {  // 可以排除不需要置顶的页面
      if (document.documentElement || document.body) {
        document.documentElement.scrollTop = document.body.scrollTop = 0;  // 切换路由时手动置顶
      }
    }
  }, [pathname]);
  return(
    <div className="pagebox">
      <Switch>
        <Route
          path="/:owner/:projectsId/issues/:index/copy"
          render={(p) => (
            <Detail {...props} {...p} open_blockchain={open_blockchain}/>
          )}
        ></Route>
        {/* 里程碑创建issue */}
        <Route
          path="/:owner/:projectsId/issues/:milepostId/new"
          render={(p) => (
            <New {...props} {...p} open_blockchain={open_blockchain}/>
          )}
        ></Route>
        <Route
          path="/:owner/:projectsId/issues/new"
          render={(p) => (
            <New {...props} {...p} open_blockchain={open_blockchain}/>
          )}
        ></Route>
        <Route
          path="/:owner/:projectsId/issues/sign"
          render={(p) => (
            <Sign {...props} {...p} open_blockchain={open_blockchain}/>
          )}
        ></Route>
        <Route
          path="/:owner/:projectsId/issues/:index"
          render={(p) => (
            <Detail {...props} {...p} open_blockchain={open_blockchain}/>
          )}
        ></Route>
        <Route
          path="/:owner/:projectsId/issues"
          render={(p) => (
            <List {...props} {...p} open_blockchain={open_blockchain}/>
          )}
        ></Route>
      </Switch>
    </div>
  )
}
export default Index;