import React, { useEffect } from "react";
import { TPMIndexHOC } from "../modules/tpm/TPMIndexHOC";
import { SnackbarHOC } from "educoder";
import { CNotificationHOC } from "../modules/courses/common/CNotificationHOC";
import { Route, Switch, Redirect } from "react-router-dom";
import Loading from "../Loading";
import Loadable from "react-loadable";
import UserInfo from "./User/Account";
import { MainContent, MinH400 } from "./css/projects";
import '../forums/css/All.scss';
import '../forums/css/Index.css';

// const Projects = Loadable({
//   loader: () => import("./User/Projects"),
//   loading: Loading,
// });

const Memos = Loadable({
  loader: () => import("./Memo/Memos"),
  loading: Loading,
});

const Sections = Loadable({
  loader: () => import("./Memo/Sections"),
  loading: Loading,
});

const Blocks = Loadable({
  loader: () => import("./User/BlockUsers"),
  loading: Loading,
});

function Index(props) {
  const history = props.history;
  useEffect(()=>{
    history.listen(()=>{
      if (document.body.scrollTop || document.documentElement.scrollTop > 0) {
        window.scrollTo(0, 0)
      }
    })
  },[history])

  return (
    <div className="newMain">
      <UserInfo {...props}></UserInfo>
      <MainContent>
        <MinH400>
          <Switch {...props}>
            <Route
              path="/accounts/:login/blocks"
              render={() => <Blocks {...props} />}
            ></Route>
            <Route
              path="/accounts/:login/interesting"
              render={() => <Sections {...props} />}
            ></Route>
            <Route
              path="/accounts/:login/replies"
              render={() => <Memos {...props} />}
            ></Route>
            <Route
              path="/accounts/:login/histories"
              render={() => <Memos {...props} />}
            ></Route>
            <Route
              path="/accounts/:login/stars"
              render={() => <Memos {...props} />}
            ></Route>
            {/* <Route
            path="/accounts/:login/p_projects"
            render={() => <Projects {...props} />}
          ></Route>
          <Route
            path="/accounts/:login/l_projects"
            render={() => <Projects {...props} />}
          ></Route> */}

            {/* <Route
            path="/accounts/:login"
            render={() => <Projects {...props} />}
          ></Route> */}
            <Route
              path="/accounts/:login/memos"
              render={() => <Memos {...props} />}
            ></Route>
            <Redirect from="/accounts/:login" to="/accounts/:login/memos"/>
          </Switch>
        </MinH400>

      </MainContent>
    </div>
  );
}
export default CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Index)));
