import React from "react";
import ApplicationStepper from "./stepper/ApplicationStepper";
import Switcher from "./Switcher";
import { makeStyles } from "@material-ui/core/styles";
import { useAuthorizationToken } from "../../hooks";
import LoginContainer from "../../features/login/components/LoginContainer";

const useStyles = makeStyles(() => ({
  app: {
    backgroundColor: "#282c34",
    minHeight: "100vh",
    display: "flex",
    flexDirection: "column"
  }
}));

const Main = () => {
  const classes = useStyles();
  const { validateToken } = useAuthorizationToken();
  const tokenIsValid = validateToken();

  return (
    <div className={classes.app}>
      {tokenIsValid ? (
        <>
          <ApplicationStepper />
          <Switcher />
        </>
      ) : (
        <LoginContainer />
      )}
    </div>
  );
};

export default Main;