import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";
import Divider from "@mui/material/Divider";
import Drawer from "@mui/material/Drawer";
import IconButton from "@mui/material/IconButton";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import MailIcon from "@mui/icons-material/Mail";
import MenuIcon from "@mui/icons-material/Menu";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import { InputAdornment, TextField } from "@mui/material";
import Grid from "@mui/material/Grid";
import Container from "@mui/material/Container";
import Paper from "@mui/material/Paper";
import CheckIcon from "@mui/icons-material/Check";
import TypeTable from "../../components/tables/TypeTable";
import SignTable from "../../components/tables/SignTable";
import { useEffect, useState } from "react";
import axios from "axios";
import EmailTable from "../../components/tables/EmailTable";

function SettingsGamerunInfo() {
  const [data, setData] = useState({
    gamerun_id: 0,
    session_id: "",
    player_name: "",
    start_time: "",
    end_time: "",
  });

  const gamerunId = 32;

  useEffect(() => {
    const headers = {
      "Content-Type": "application/json",
    };
    axios
      .get("http://localhost:8000/api/gameruns/" + gamerunId, {
        headers: headers,
      })
      .then(function (response) {
        setData(response.data);
      })
      .then()
      .catch((err) => console.log(err));
  }, []);

  return (
    <Box>
      {[
        "gamerun_id",
        "session_id",
        "player_name",
        "start_time",
        "end_time",
      ].map((item) => (
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            mt: "55px",
            ml: "15px",
          }}
        >
          <Box sx={{ width: "35%", pr: "15px" }}>{item}:</Box>

          <Box sx={{ width: "65%" }}>{data[item]}</Box>
        </Box>
      ))}

      <EmailTable gamerunID={gamerunId} />
    </Box>
  );
}

export default SettingsGamerunInfo;
