import React, { useReducer } from "react";
import ApplicationStepper from "./layout/stepper/ApplicationStepper";
import Switcher from "./layout/Switcher";
import { makeStyles } from "@material-ui/core/styles";
import { initialState } from "../state/initialState";
import { reducer } from "../state/reducer";

const useStyles = makeStyles(() => ({
  app: {
    textAlign: "center",
    backgroundColor: "#282c34",
    minHeight: "100vh",
    display: "flex",
    flexDirection: "column"
  },
  content: {
    minHeight: "80vh",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "calc(10px + 2vmin)",
    color: "white"
  }
}));

const App = () => {
  const classes = useStyles();
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div className={classes.app}>
      <ApplicationStepper />
      <div className={classes.content}>
        <Switcher />
      </div>
    </div>
  );
};

export default App;