import React from "react";
import {
  AppBar,
  Box,
  Button,
  ButtonGroup,
  createTheme,
  Divider,
  makeStyles,
  styled,
  Toolbar,
  Typography,
  withStyles,
} from "@material-ui/core";
import { Grid } from "@material-ui/core";
import MainHeader from "../components/MainHeader";
import { BrowserRouter as Router, Link } from "react-router-dom";

const WhiteTextTypography = withStyles({
  root: {
    color: "#FFFFFF",
  },
})(Typography);

const WhiteDivider = withStyles({
  root: {
    backgroundColor: "#FFFFFF",
  },
})(Divider);

const useStyles = makeStyles({
  root: {
    margin: "auto",
  },
});

function Header() {
  return (
    <AppBar position="absolute" color="transparent">
      <Toolbar>
        <Button
          size="small"
          variant="contained"
          color="primary"
          component={Link}
          to="/settings"
        >
          Manage
        </Button>
      </Toolbar>
    </AppBar>
  );
}

const MainPage = () => {
  const classes = useStyles();
  return (
    <Box>
      <Grid container>
        <Grid item xs={12}>
          <MainHeader />
        </Grid>

        <Grid
          item
          container
          direction="column"
          alignItems="center"
          justifyContent="center"
          spacing={5}
          style={{ height: "80vh" }}
          className={classes.root}
        >
          <Grid item>
            <Typography variant="h4">Phishing training</Typography>
            <WhiteDivider />
          </Grid>
          <Grid item>
            <Button
              size="large"
              style={{
                minWidth: "160px",
              }}
              variant="contained"
              color="primary"
              component={Link}
              to="/username"
            >
              Play
            </Button>
          </Grid>
          <Grid item>
            <Button
              size="large"
              style={{
                minWidth: "160px",
              }}
              variant="contained"
              color="primary"
              component={Link}
              to="/instructions"
            >
              How to play
            </Button>
          </Grid>
        </Grid>
      </Grid>
    </Box>
  );
};

export default MainPage;
