import React from 'react';

import { Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import Loading from "../../Loading";

import { SnackbarHOC } from "educoder";
import { CNotificationHOC } from "../../modules/courses/common/CNotificationHOC";
import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";


import '../css/index.scss';

const New = Loadable({
  loader: () => import("./New"),
  loading: Loading,
});
const DetailIndex = Loadable({
  loader: () => import("./Sub/Detail"),
  loading: Loading,
});
const SubDetail = Loadable({
  loader: () => import("./Sub/SubDetail"),
  loading: Loading,
});
export default CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(
  ((props)=>{
    return (
      <div className="newMain">
        <Switch {...props}>
          <Route
            path="/organize/:organizeId/group"
            render={(props) => {
              return <SubDetail {...props} />
            }}
          ></Route>
          <Route
            path="/organize/:organizeId/member/:memberId/setting"
            render={(props) => {
              return <DetailIndex {...props} />
            }}
          ></Route>
          <Route
            path="/organize/:organizeId/member"
            render={(props) => {
              return <SubDetail {...props} />
            }}
          ></Route>
          <Route
            path="/organize/new"
            render={(props) => {
              return <New {...props} />
            }}
          ></Route>
          <Route
            path="/organize/:organizeId"
            render={(props) => {
              return <DetailIndex {...props} />
            }}
          ></Route>
        </Switch>
      </div>
    )
  })
)))