import React from 'react';

import { Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import Loading from "../../Loading";
import { withRouter } from "react-router";
import { SnackbarHOC } from "educoder";
import { CNotificationHOC } from "../../modules/courses/common/CNotificationHOC";
import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
import '../css/index.scss';
import './Index.scss';

const GroupNew = Loadable({
  loader: () => import("./Group/GroupNew"),
  loading: Loading,
});
const New = Loadable({
  loader: () => import("./New"),
  loading: Loading,
});
const DetailIndex = Loadable({
  loader: () => import("./Sub/Detail"),
  loading: Loading,
});
const SubDetailIndex = Loadable({
  loader: () => import("./Sub/SubDetail"),
  loading: Loading,
});
export default withRouter(CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(
  ((props)=>{
    return (
      <div className="newMain">
        <Switch>
          {/* 组织团队-设置 */}
          <Route
            path="/organize/:OIdentifier/group/:groupId/setting"
            render={(p) => {
              return <SubDetailIndex {...props} {...p}/>
            }}
          ></Route>
          {/* 组织团队-新建 */}
          <Route
            path="/organize/:OIdentifier/group/new"
            render={(p) => {
              return <GroupNew {...props} {...p}/>
            }}
          ></Route>
          {/* 组织团队-子级（包含组织团队列表） */}
          <Route
            path="/organize/:OIdentifier/group"
            render={(p) => {
              return <DetailIndex {...props}  {...p}/>
            }}
          ></Route>
          {/* 组织成员 */}
          <Route
            path="/organize/:OIdentifier/member"
            render={(p) => {
              return <DetailIndex {...props}  {...p}/>
            }}
          ></Route>
          {/* 新建组织 */}
          <Route
            path="/organize/new"
            render={(p) => {
              return <New {...props}  {...p}/>
            }}
          ></Route>
          {/* 组织详情（包含组织设置） */}
          <Route
            path="/organize/:OIdentifier"
            render={(p) => (
              <DetailIndex {...props} {...p}/>
            )}
          ></Route>
        </Switch>
      </div>
    )
  })
))))