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'

const style = {
  padding: 5,
  paddingBottom: 10,
  position: 'absolute',
  top: '30%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  backgroundColor: 'white',
  border: '1px solid black',
  boxShadow: 24,
}
const boxStyle = {
  backgroundColor: 'white',
  border: '1px solid black',
  boxShadow: 24,
}
const buttonStyle = {
  position: 'absolute',
  top: '35%',
  left: '57%',
  transform: 'translate(-50%, -50%)',
  width: 50,
  boxShadow: 24,
  color: 'white',
  backgroundColor: '#a2627c',
  '&:hover': {
    backgroundColor: '#a2627c',
  },
  marginTop: '1%'
}

const buttonStyle2 = {
  position: 'absolute',
  top: '35%',
  left: '45%',
  transform: 'translate(-50%, -50%)',
  width: 150,
  boxShadow: 24,
  color: 'white',
  backgroundColor: '#a2627c',
  '&:hover': {
    backgroundColor: '#a2627c',
  },
  marginTop: '1%'
}

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

const StartGameModal = ({ quiz }) => {
  const token = localStorage.getItem('token');
  const [quizSession, setQuizSession] = useState(quiz.session)
  const [sessionStatus, setsessionStatus] = useState('')
  const [copyContent, setCopyContent] = useState('')
  const [open, setOpen] = useState(false)
  const [text, setText] = useState('Copy')

  const getSession = async () => {
    console.log(quiz.session)
    // this request is to start the session of quiz
    if (quiz.session === null) {
      console.log('going to make request')
      await gameService.startSession(token, quiz.id)
        .then(response => {
          console.log(response)
        }).then(response => {
          gameService.getQuizData(token, quiz.id)
            .then(response => {
              setQuizSession(response.active)
              setsessionStatus('New session has been started, click on \'Copy\' to copy URL of game! Click on \'To Admin Panel\' to get the game started!')
              setCopyContent('http://localhost:3000/join/' + response.active)
              console.log(response.active)
              console.log(quizSession)
              setOpen(true)
            })
        })
      return quizSession
    } else {
      setsessionStatus('Session has already begun, click on \'Copy\' to copy URL of game! Click on \'To Admin Panel\' to get the game started!')
      setCopyContent('http://localhost:3000/join/' + quizSession)
      setOpen(true)
    }
  }
  const handleClose = () => {
    setOpen(false)
    console.log(sessionStatus)
    if (sessionStatus !== 'Session has already begun, click on \'Copy\' to copy URL of game! Click on \'To Admin Panel\' to get the game started!') {
      window.location.reload(false);
    }
  }
  const copytoClipBoard = () => {
    navigator.clipboard.writeText(copyContent)
    setText('Copied')
  }
  return (
    <div>
    <Button sx={startStopButtonStyle} onClick={getSession} className="startButton">Start</Button>
    <div>
    <Modal
    onClose={handleClose}
    open={open}
    id="ajax">
      <Box sx={boxStyle}>
        <Typography variant="h6" sx={style} className="sessionText">
            {sessionStatus}
        </Typography>
        <Button onClick={() => copytoClipBoard()} sx={buttonStyle}>{text}</Button>
        <Button href={`admin/panel/${quizSession}/${quiz.id}`} sx={buttonStyle2}>{'To Admin Panel'}</Button>
      </Box>
    </Modal>
    </div>
    </div>
  )
}

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