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: {
    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"
  },
  appLoginOnly: {
    textAlign: "center",
    backgroundColor: "#282c34",
    minHeight: "100vh",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center"
  }
}));

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

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

export default Main;