import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import { Button, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import Grid from "@mui/material/Grid";
import axios from "axios";
import { Link } from "react-router-dom";
import CheckIcon from "@mui/icons-material/Check";
import CloseIcon from "@mui/icons-material/Close";

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

  const [emails, setEmails] = useState([]);

  useEffect(() => {
    axios("http://localhost:8000/summary/", {
      method: "GET",
      withCredentials: true,
    }).then((res) => {
      setEmails(res.data);
      setMsg(
        props.nickname +
          " You have " +
          res.data.filter((email) => email.answer.correctness === true).length +
          "/" +
          res.data.length +
          " correct"
      );
      console.log(res.data);
    });
  }, []);

  const PlayAgainButton = (
    <Box
      sx={{
        display: "flex",
        width: "100%",
        justifyContent: "center",
        my: 4,
      }}
    >
      <Button
        sx={{ marginX: "auto" }}
        variant="contained"
        component={Link}
        to="/username"
      >
        play again
      </Button>
    </Box>
  );

  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>
      </Paper>
    );
  }

  return (
    <div>
      <Paper
        sx={{
          width: "95%",
          height: "15vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          margin: "auto",
          mt: 1,
          backgroundColor: "#eeeeee",
        }}
      >
        {msg}
      </Paper>
      {PlayAgainButton}
      <Grid container spacing={6}>
        {emails.map((val, index) => (
          <Grid item container key={index}>
            <Grid item xs={12} sm={6}>
              <Box
                sx={{
                  display: "flex",
                  width: "100%",
                  justifyContent: "center",
                }}
              >
                <EmailWindow currentEmail={val.email} />
              </Box>
            </Grid>
            <Grid item xs={12} sm={6}>
              <Paper
                sx={{ margin: "0 auto", width: "40%", height: 300, padding: 2 }}
              >
                <Typography>
                  Average correctness: {val.average_correctness}%
                </Typography>
                <Typography>Your time: {val.players_duration}</Typography>

                <Typography>
                  Average duration: {val.average_duration}
                </Typography>
                <Box sx={{ display: "flex", alignItems: "center" }}>
                  <Typography variant="h6">
                    Your answer:
                    {val.answer.player_answer === true
                      ? "Phishing"
                      : "Legitimate"}
                  </Typography>
                  {val.answer.correctness === true ? (
                    <CheckIcon sx={{ color: "green" }} />
                  ) : (
                    <CloseIcon sx={{ color: "red" }} />
                  )}
                </Box>
              </Paper>
            </Grid>
          </Grid>
        ))}
      </Grid>
      {PlayAgainButton}
    </div>
  );
}
