import Paper from "@mui/material/Paper";
import { useEffect, useState } from "react";
import Box from "@mui/material/Box";
import { Button, IconButton, Typography } from "@mui/material";
import HelpIcon from "@mui/icons-material/Help";
import CancelIcon from "@mui/icons-material/Cancel";
import axios from "axios";
import { useHistory } from "react-router";

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

export default function PlayPage(props) {
  const [msg, setMsg] = useState("");
  const [currentEmail, setCurrentEmail] = useState(initVal);
  const [helpWindowOpened, setHelpWindowOpened] = useState(false);
  const [initLoad, setInitLoad] = useState(true);
  const [answer, setAnswer] = useState({ answered: false, answer: false });
  const history = useHistory();

  function getNextEmail() {
    axios("http://localhost:8000/next_email/", {
      method: "GET",
      withCredentials: true,
    }).then((res) => {
      if (res.data.end) {
        history.push(`/summary`);
      } else {
        setAnswer({ answered: false, answer: false });
        setCurrentEmail(res.data);
        setMsg("")
      }
    });
  }

  useEffect(() => {
    if (initLoad) {
      setInitLoad(!initLoad);
      getNextEmail();
    }
  }, []);

  function handleAnswer(e) {
    let answer = e.target.value === "true";
    let type = currentEmail["type"];
    let emailIsPhishing = type !== "legitimate";

    setAnswer({ answered: true, answer: answer });

    axios("http://localhost:8000/answer/", {
      method: "POST",
      withCredentials: true,
      data: { answer: answer },
    })

    if (answer === false && emailIsPhishing === false) {
      setMsg("Correct! This is a legitimate email");
    } else if (answer === true && emailIsPhishing === true) {
      setMsg("Correct! This is a phishing email (" + type + ")");
    } else if (answer === false && emailIsPhishing === true) {
      setMsg("Wrong! This is a phishing email (" + type + ")");
    } else {
      setMsg("Wrong! This is a legitimate email");
    }


  }

  const emailWindow = (
    <Paper sx={{ width: "50%", height: 500 }}>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "95%",
          height: "20%",
          margin: "auto",
          justifyContent: "center",
        }}
      >
        <Typography variant="h5">{currentEmail.subject}</Typography>
        <Typography variant="body2">{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"
          >
            {currentEmail.body}
          </Typography>
        </Paper>
      </Box>
      <Box
        sx={{
          display: "flex",
          width: "100%",
          height: "10%",
          justifyContent: "space-evenly",
          alignItems: "center",
        }}
      >
        <Button
          variant="contained"
          sx={{ width: "110px" }}
          value={false}
          disabled={answer.answered}
          onClick={handleAnswer}
        >
          Legitimate
        </Button>
        <Typography>emails</Typography>
        <Button
          variant="contained"
          sx={{ width: "110px" }}
          value={true}
          disabled={answer.answered}
          onClick={handleAnswer}
        >
          Phishing
        </Button>
      </Box>
    </Paper>
  );

  const helpWindow = (
    <Paper sx={{ height: 450, width: "35%" }}>
      <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
        <IconButton onClick={handleHelpWindow}>
          <CancelIcon />
        </IconButton>
      </Box>
      <Box sx={{ padding: 2, overflowY: "auto" }}>
        <Typography sx={{ wordWrap: "break-word" }}>HINTS</Typography>
      </Box>
    </Paper>
  );

  // TODO: add indicators content
  const indicatorsWindow = (
    <Paper sx={{ height: 450, width: "35%" }}>
      <Box sx={{ padding: 2, overflowY: "auto", height: "80%" }}>
        <Typography sx={{ wordWrap: "break-word" }}>Indicators</Typography>
      </Box>
      <Box sx={{ display: "flex", justifyContent: "flex-end", height: "40px" }}>
        <Button variant="contained" color="primary" onClick={handleNextEmail}>
          Next
        </Button>
      </Box>
    </Paper>
  );

  function handleHelpWindow() {
    setHelpWindowOpened(!helpWindowOpened);
  }

  function handleNextEmail() {
    getNextEmail();
  }

  return (
    <div>
      <Paper
        sx={{
          width: "95%",
          height: "15vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          margin: "auto",
          mt: 1,
          backgroundColor: "#eeeeee",
        }}
      >
        {msg}
      </Paper>
      <Box
        sx={{
          display: "flex",
          width: "100%",
          mt: 4,
          justifyContent: "space-evenly",
        }}
      >
        {emailWindow}
        {helpWindowOpened === true && !answer.answered ? helpWindow : ""}
        {answer.answered ? indicatorsWindow : ""}
      </Box>
      <Box
        sx={{
          display: "flex",
          justifyContent: "flex-end",
          mt: -6,
          pr: 2,
        }}
      >
        {helpWindowOpened || answer.answered ? (
          ""
        ) : (
          <IconButton onClick={handleHelpWindow}>
            <HelpIcon color="primary" />
          </IconButton>
        )}
      </Box>
    </div>
  );
}
