import "./App.css";
import React, { useEffect } from "react";
import InstructionPage from "./pages/instructionPage";
import SettingsPage from "./pages/settingsPage";
import UsernamePage from "./pages/usernamePage";
import PlayPage from "./pages/playPage";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import IntroPage from "./pages/introPage";
import SummaryPage from "./pages/summaryPage";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { createTheme } from "@mui/material/styles";
import LoginPage from "./pages/loginPage";
import PrivateRoute from "./routes/PrivateRoute";
import PlayRoute from "./routes/PlayRoute";
import { loadUser } from "./store/auth/actions";
import store from "./store/store";
import { Provider } from "react-redux";

const Routes = {
  Home: "/",
  Settings: "/settings",
  Instructions: "/instructions",
  Username: "/username",
  Play: "/play",
  Login: "/login",
  Summary: "/summary",
};

const theme = createTheme({
  palette: {
    mode: "dark",
    primary: {
      main: "#018786",
    },
    secondary: {
      main: "#f50057",
    },
    background: {
      default: "#252525",
      paper: "#333333",
    },
  },
});

/**
 * Main App component
 */
function App() {
  useEffect(() => {
    store.dispatch(loadUser());
  }, []);

  return (
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Router>
          <Switch>
            <Route path={Routes.Home} exact component={IntroPage} />
            <PrivateRoute path={Routes.Settings} component={SettingsPage} />
            <Route
              path={Routes.Instructions}
              exact
              component={InstructionPage}
            />
            <Route path={Routes.Username} exact component={UsernamePage} />
            <PlayRoute path={Routes.Play} exact component={PlayPage} />
            <Route path={Routes.Login} exact component={LoginPage} />
            <PlayRoute path={Routes.Summary} exact component={SummaryPage} />
          </Switch>
        </Router>
      </ThemeProvider>
    </Provider>
  );
}

export default App;
