import * as React from "react";
import { Fragment, useEffect, useState } from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid";
import EmailTable from "../../components/tables/EmailTable";
import { fetchGamerunById } from "../../helpers/gameruns";

// Page where gamerun info is displayed,
// admin can also remove emails
function GamerunInfoPage({ match }) {
  // gamerun info
  const [gamerun, setGamerun] = useState({
    id: 0,
    player_name: "",
    start_time: "",
    end_time: "",
  });

  const gamerunId = match.params.id;

  // on page mount fetch gamerun info
  useEffect(() => {
    fetchGamerunById(gamerunId).then((gr) => {
      setGamerun(gr);
    });
  }, [gamerunId]);

  // row with one gamerun info
  const InfoRow = ({ text, value }) => {
    return (
      <Fragment>
        <Grid item xs={3} sm={4}>
          <Typography
            sx={{
              textAlign: "right",
              overflowWrap: "break-word",
            }}
          >
            {text}:
          </Typography>
        </Grid>
        <Grid item xs={9} sm={8}>
          <Typography
            sx={{
              overflowWrap: "break-word",
            }}
          >
            {value}
          </Typography>
        </Grid>
      </Fragment>
    );
  };

  return (
    <Box sx={{ mt: 4 }}>
      <Grid container direction="column" spacing={2}>
        <Grid item container spacing={1}>
          <InfoRow text={"Gamerun ID"} value={gamerun.id} />
          <InfoRow text={"Player name"} value={gamerun.player_name} />
          <InfoRow text={"Start time"} value={gamerun.start_time} />
          <InfoRow text={"End time"} value={gamerun.end_time} />
        </Grid>
      </Grid>
      {/* EmailTable of gamerun */}
      <EmailTable gamerunID={gamerunId} hideCheckbox={true} />
    </Box>
  );
}

export default GamerunInfoPage;
