import React from "react";

import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router";

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

import Loadable from "react-loadable";
import Loading from "../Loading";
import { ImageLayerOfCommentHOC } from "../modules/page/layers/ImageLayerOfCommentHOC";
import { useState } from "react";


// 任务管理审核
const Home = Loadable({
  loader: () => import("./home"),
  loading: Loading,
});
// 开源夏令营报名页面
const Apply = Loadable({
  loader: () => import("./apply"),
  loading: Loading,
});
// 开源夏令营帮助中心页面
const Help = Loadable({
  loader: () => import("./help"),
  loading: Loading,
});
// 任务管理审核
const Student = Loadable({
  loader: () => import("./student"),
  loading: Loading,
});

// 开源夏令营项目、课题列表页面
const Project = Loadable({
  loader: () => import("./project"),
  loading: Loading,
});

const Glcc = (propsF) => {
  // 判断时间是否在开源夏令营报名时间内（4月15日~5月20日）
  const isGlccApplyDate = Date.parse(new Date()) < 1653062400000;

  return (
    <div className="newMain clearfix">
      <Switch {...propsF}>
        {/* 学生报名 */}
        <Route
          path="/glcc/student/apply/:taskId"
          render={(props) => (
            <Student {...propsF} {...props} isGlccApplyDate={isGlccApplyDate}/>
          )}
        ></Route>
        {/* 开源夏令营报名页面 */}
        <Route
          path="/glcc/apply"
          render={(props) => (
            <Apply {...propsF} {...props} isGlccApplyDate={isGlccApplyDate}/>
          )}
        ></Route>
        {/* 帮助中心 */}
        <Route
          path="/glcc/help"
          render={(props) => (
            <Help {...propsF} {...props} />
          )}
        ></Route>
        {/* 项目/课题列表 */}
        <Route
          path="/glcc/student"
          render={(props) => (
            <Project {...propsF} {...props}/>
          )}
        ></Route>
        {/* 首页 */}
        <Route
          path="/glcc"
          render={(props) => (
            <Home {...propsF} {...props} isGlccApplyDate={isGlccApplyDate}/>
          )}
        ></Route>

      </Switch>
    </div>
  );
}

export default withRouter(
  ImageLayerOfCommentHOC({
    imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
    parentSelector: ".newMain",
  })(CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Glcc))))
);
