import { Typography, Button, Box } from '@mui/material';
import React, { useState } from 'react';
import { useParams, Link as URLlink } from 'react-router-dom';
import gameDataService from '../BackendRequests/gameData';

const advBtnStyle = {
  mr: 1,
  backgroundColor: '#d0605e',
  color: 'white',
  '&:hover': {
    background: 'transparent',
    color: 'black',
  },
  float: 'right',
}

const buttonStyle = {
  mb: 2,
  backgroundColor: '#d0605e',
  color: 'white',
  '&:hover': {
    background: 'transparent',
    color: 'black',
  },
}

const style = {
  padding: 5,
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '40%',
  backgroundColor: 'white',
  border: '1px solid black',
  boxShadow: 24,
}

const AdminPanelPage = () => {
  const sessionId = useParams().sId
  const quizId = useParams().gId
  const token = localStorage.getItem('token');
  const [pos, setPos] = useState(-1);
  const [questions, setQuestions] = useState([])

  const getSessionStatus = async () => {
    try {
      const res = await gameDataService.getSessionStatus(token, sessionId)
      console.log(res)
      setPos(res.results.position)
      console.log(pos)
      setQuestions(res.results.questions)
    } catch (err) {
      console.log(err)
    }
  }
  const advanceSession = async () => {
    try {
      await gameDataService.advanceSession(token, quizId)
    } catch (err) {
      console.log(err)
    }
  }

  const DisplayScreen = () => {
    if (pos < 0) {
      return (
        <>
          <Button
            onClick={() => {
              advanceSession();
              getSessionStatus();
            }}
            sx={advBtnStyle}>
            Advance Session
          </Button>
          <Typography>Start!</Typography>
        </>
      )
    } else if (pos > questions.length - 1) {
      return (
        <>
        <Box sx={style}>
          <Typography>End of quiz!</Typography>
          <Typography>View Result?</Typography>
          {/* Add link to result here */}
          <Button component={URLlink} to={'/quiz/results/' + quizId + '/' + sessionId} sx={buttonStyle}>View Results</Button>
          <br />
          <Button sx={buttonStyle} component={URLlink} to={'/dashboard'}>Back to dashboard</Button>
        </Box>
        </>
      )
    } else {
      const index = pos
      const ansList = questions[index]
      const correctList = ansList.answers.filter(a => a.isCorrect === true)
      return (
        <>
          <Button
            onClick={() => {
              advanceSession();
              getSessionStatus();
            }}
            sx={advBtnStyle}>
            Advance Session
          </Button>
          <Box sx={style}>
            <Typography>Current question: {pos + 1}</Typography>
            <Typography>{ansList.content}</Typography>
            <Typography fontWeight='bold'>Available answers: </Typography>
            {ansList.answers.map((a) => (
              <Typography key={a.answerNum}>{a.answerText}</Typography>
            ))}
            <Typography fontWeight='bold'>Correct answer(s):</Typography>
            {correctList.map((a, index) => (
              <Typography key={index}>{a.answerText}</Typography>
            ))}
          </Box>
        </>
      )
    }
  }
  return (
    <>
      <Typography display='inline'>Session {sessionId}</Typography>
      <DisplayScreen />
    </>
  )
}

export default AdminPanelPage;