import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import { Button, Typography } from "@mui/material";
import { useState } from "react";
import Grid from "@mui/material/Grid";

let initVal = { subject: "sub", sender: "sen", body: "bod" };

export default function SummaryPage() {
  const [msg, setMsg] = useState();

  function EmailWindow(props) {
    return (
      <Paper sx={{ width: "80%", height: 300 }}>
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            width: "95%",
            height: "20%",
            margin: "auto",
            justifyContent: "center",
          }}
        >
          <Typography variant="h5">{props.currentEmail.subject}</Typography>
          <Typography variant="body2">{props.currentEmail.sender}</Typography>
        </Box>
        <Box
          sx={{
            width: "95%",
            height: "70%",
            margin: "auto",
          }}
        >
          <Paper sx={{ width: "100%", height: "100%", overflowY: "auto" }}>
            <Typography
              sx={{ wordWrap: "break-word", padding: 2 }}
              variant="body2"
            >
              {props.currentEmail.body}
            </Typography>
          </Paper>
        </Box>
        <Box
          sx={{
            display: "flex",
            width: "100%",
            height: "10%",
            justifyContent: "space-evenly",
            alignItems: "center",
          }}
        ></Box>
      </Paper>
    );
  }

  return (
    <div>
      <Paper
        sx={{
          width: "95%",
          height: "15vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          margin: "auto",
          mt: 1,
          backgroundColor: "#eeeeee",
        }}
      >
        {msg}
      </Paper>
      <Box height={40}></Box>
      <Grid container spacing={6}>
        {[initVal, initVal, initVal].map((val) => (
          <Grid item container>
            <Grid item xs={12} sm={6}>
              <Box
                sx={{
                  display: "flex",
                  width: "100%",
                  justifyContent: "center",
                }}
              >
                <EmailWindow currentEmail={val} />
              </Box>
            </Grid>
            <Grid item xs={12} sm={6}>
              <Paper sx={{ margin: "auto", width: "40%", height: 300 }}>
                ff
              </Paper>
            </Grid>
          </Grid>
        ))}
      </Grid>
      <Box
        sx={{
          display: "flex",
          width: "100%",
          justifyContent: "center",
          my: 4,
        }}
      >
        <Button sx={{ marginX: "auto" }} variant="contained">
          play again
        </Button>
      </Box>
    </div>
  );
}
