import Modal from '@mui/material/Modal'
import { Box, Typography, Button } from '@mui/material'
import React, { useState } from 'react'
import gameService from '../BackendRequests/gameData';
import PropTypes from 'prop-types'
import { Link as URLlink } from 'react-router-dom';

const style = {
  padding: 5,
  position: 'absolute',
  top: '30%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  backgroundColor: 'white',
  border: '1px solid black',
  boxShadow: 24,
}
const startStopButtonStyle = {
  backgroundColor: '#d0605e',
  color: 'white',
  '&:hover': {
    background: 'transparent',
    color: 'black',
  },
}
const yesButtonStyle = {
  position: 'absolute',
  top: '35%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 50,
  color: 'white',
  boxShadow: 24,
  backgroundColor: '#a2627c',
  '&:hover': {
    backgroundColor: '#a2627c',
  },
}
const noButtonStyle = {
  position: 'absolute',
  top: '35%',
  left: '55%',
  transform: 'translate(-50%, -50%)',
  width: 50,
  boxShadow: 24,
  color: 'white',
  backgroundColor: '#a2627c',
  '&:hover': {
    backgroundColor: '#a2627c',
  },
}

const StopGameModal = ({ quiz }) => {
  const token = localStorage.getItem('token');
  const [quizSession, setQuizSession] = useState(quiz.session)
  const [sessionStatus, setsessionStatus] = useState('')
  const [open, setOpen] = useState(false)
  const [showResults, setShowResults] = useState(false)
  const resultsId = quiz.session

  const getSession = async () => {
    console.log(quiz.session)
    // this request is to stop the session of quiz
    if (quiz.session !== null) {
      console.log('going to make request')
      await gameService.stopSession(token, quiz.id)
        .then(response => {
          console.log(response)
        }).then(response => {
          gameService.getQuizData(token, quiz.id)
            .then(response => {
              setQuizSession(response.active)
              setShowResults(true)
              setsessionStatus('Game has been stopped, would you like to view results?')
              console.log(response.active)
              console.log(quizSession)
              setOpen(true)
            })
        })
      return quizSession
    } else {
      setsessionStatus('Game has not been started yet')
      setQuizSession('')
      setOpen(true)
    }
  }

  const handleClose = () => {
    setOpen(false)
    window.location.reload(false);
  }
  return (
    <div>
    <Button sx={startStopButtonStyle} onClick={getSession} className="stopButton">Stop</Button>
    <div>
    <Modal
    onClose={handleClose}
    open={open}
    id="ajax">
      <Box>
        <Typography variant="h6" sx={style}>
            {sessionStatus}{quizSession}
        </Typography>
        {showResults && <Button component={URLlink} to={'/quiz/results/' + quiz.id + '/' + resultsId} sx={yesButtonStyle}>Yes</Button>}
        {showResults && <Button onClick={() => handleClose()} sx={noButtonStyle}>No</Button>}
      </Box>
    </Modal>
    </div>
    </div>
  )
}

StopGameModal.propTypes = {
  quiz: PropTypes.object
}
export default StopGameModal