import { Box, Snackbar } from "@material-ui/core";
import Container from "@material-ui/core/Container";
import Alert from "@material-ui/lab/Alert";
import React, { useState } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Appbar from "../Appbar/Appbar";
import Challenge from "../Challenge/Challenge";
import Challenges, { ChallengeData } from "../Challenges/Challenges";
import Dashboard from "../Dashboard/Dashboard";
import Documentation from "../Documentation/Documentation";
import { ProgressService } from "../Progress/ProgressService";
import { LayoutContext } from "./LayoutContext";


const App = () => {


  const p = ProgressService.createOrGet();

  const [progress, setProgress] = useState(p);
  const [challengesDone, setChallengesDone] = useState(ProgressService.done());
  const [progressPercentage, setProgressPercentage] = useState(ProgressService.donePercentage());
  const [loading, setLoading] = useState(false);
  const [snackOpen, setSnackOpen] = useState(false);
  const [snackErrorMessage, _setSnackErrorMessage] = useState("");

  const setSnackErrorMessage = (msg: string) => {
    _setSnackErrorMessage(msg);
    setSnackOpen(true);
  };

  const layoutInitialState = {
    progress, setProgress,
    progressPercentage, setProgressPercentage,
    challengesDone, setChallengesDone,
    loading, setLoading,
    setSnackErrorMessage
  };

  const renderChallenge = (c: ChallengeData) => {
    return () => <Challenge obj={c} />;
  };



  const snackClose = () => {
    setSnackOpen(false);
  };

  return (
    <div className="App">
      <Router>
        <LayoutContext.Provider value={layoutInitialState}>
          <Appbar />
          <Container fixed>
            {
              Challenges.map((c) => {
                return (
                  <Box key={c.name}>
                    <Route path={c.url} render={renderChallenge(c)} exact={true} />
                  </Box>
                );
              })
            }
            <Route exact path="/"><Dashboard /></Route>
            <Route exact path="/docs/:topic" component={Documentation} />

            <Snackbar open={snackOpen} autoHideDuration={6000} onClose={snackClose}>
              <Alert severity="error">
                {snackErrorMessage}
              </Alert>
            </Snackbar>
          </Container>
        </LayoutContext.Provider>
      </Router>

    </div >
  );
};

export default App;