import React, { useEffect, useState } from 'react'
import { Link as URLlink, Route } from 'react-router-dom';
import {
  Button, Typography, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, TextField, Box
} from '@mui/material'
import createQuizService from '../BackendRequests/createGame.jsx'
import loginService from '../BackendRequests/login'
import deleteGameService from '../BackendRequests/deleteGame';
import quizListService from '../BackendRequests/quizList';
import quizService from '../BackendRequests/gameData';
import image from '../QUIZ.png'
import StartGameButton from './StartGameModal'
import StopGameButton from './StopGameModal'
import LoginPage from './LoginPage';

const style = {
  position: 'absolute',
  left: '92%',
  top: '1%',
  backgroundColor: '#a2627c',
  '&:hover': {
    backgroundColor: '#a2627c',
  },
}

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

const deleteButtonStyle = {
  backgroundColor: '#d0605e',
  color: 'white',
  '&:hover': {
    backgroundColor: 'white',
    color: 'black',
  },
}

const DashboardPage = () => {
  const [quizzes, setQuizzes] = useState([])
  const token = localStorage.getItem('token');
  // const navigate = useNavigate();
  const defaultImage = image

  // this prevent user accessing /dashboard by url without login
  useEffect(() => {
    if (!token) {
      // navigate('/login');
      <Route exact path="/login" element={<LoginPage />} />
    }
  });

  useEffect(() => {
    if (!token) {
      // navigate('/login');
      <Route exact path="/login" element={<LoginPage />} />
    }
    quizListService.getQuizzes(token)
      .then(response => {
        const quizList = response.quizzes;
        Promise.all(
          quizList.map(quiz => getQuizData(quiz.id))
        ).then(response => {
          const consolidatedList = response.map(quiz => {
            return {
              session: quiz.active,
              id: quiz.id,
              name: quiz.name,
              thumbnail: quiz.thumbnail,
              totalQuestions: quiz.questions.length,
              totalTime: getQuestionsTotalTime(quiz.questions)
            }
          });
          setQuizzes(consolidatedList);
        });
      })
  }, [])
  console.log(quizzes)

  const getQuizData = quizId => {
    return quizService.getQuizData(token, quizId)
      .then(response => {
        response.id = quizId;
        return response;
      })
  }

  const getQuestionsTotalTime = quizQuestions => {
    let totalTime = 0;
    quizQuestions.map(question =>
      (totalTime = parseInt(question.timeLimit) + totalTime));
    return totalTime;
  }

  const email = localStorage.getItem('email');
  const logoutButton = async () => {
    try {
      console.log(email);
      await loginService.logout(email);
      localStorage.removeItem('token');
    } catch (err) {
      console.log(err);
    }
  }

  // This work but need to refresh page. TODO: dynamic list display
  // Also ideally has a confirmation prompt after pressing the button
  const deleteButton = async (gId) => {
    try {
      await deleteGameService.deleteQuiz(token, gId)
      window.location.reload(false);
    } catch (err) {
      console.log(err)
    }
  }

  const [name, setQuizName] = useState('');
  const createNewQuiz = async () => {
    try {
      await createQuizService.createQuiz(token, { name })
      window.location.reload(false);
    } catch (err) {
      console.log(err);
    }
  }

  if (quizzes != null) {
    const list = quizzes
    return (
      <div style={{ display: 'grid', gridRowGap: '10px', padding: '20px', paddingLeft: '100px', paddingRight: '100px' }}>
        <h1 style = {{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>Dashboard</h1>
        <Box className="newQuiz" style = {{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <TextField type="text" label="Enter Quiz Name" className="newQuizButton" name="newQuizInput" style = {{ width: 200 }} onChange={e => setQuizName(e.target.value)} />
          <Button onClick={createNewQuiz} className="newQuizSubmit" type="submit" style = {{ width: 200, height: 45, backgroundColor: '#a2627c', }} variant="contained">Create new quiz!</Button>
        </Box>
        <Typography fontWeight='bold'>
          Your Quizzes
        </Typography>
        <TableContainer>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell><h3>Thumbnail</h3></TableCell>
                <TableCell><h3>Title</h3></TableCell>
                <TableCell><h3>Number of Questions</h3></TableCell>
                <TableCell><h3>Total Question Time</h3></TableCell>
                <TableCell></TableCell>
                <TableCell></TableCell>
                <TableCell></TableCell>
                <TableCell></TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {list && list.map((quiz) => (
                <TableRow key={quiz}>
                  <TableCell>{quiz.thumbnail
                    ? <img src={quiz.thumbnail} width="60" height="60"></img>
                    : <img src={defaultImage} width="60" height="60"></img>}</TableCell>
                  <TableCell className="quizName">{quiz.name && quiz.name}</TableCell>
                  <TableCell>{quiz.totalQuestions}</TableCell>
                  <TableCell>{quiz.totalTime}</TableCell>
                  <TableCell>{quiz && <StartGameButton quiz={quiz} />}</TableCell>
                  <TableCell>{quiz && <StopGameButton quiz={quiz} />}</TableCell>
                  <TableCell className="editButton"><Button component={URLlink} to={'/edit/game/' + quiz.id} sx={startStopButtonStyle}>
                    Edit</Button></TableCell>
                  <TableCell><Button onClick={() => deleteButton(quiz.id)} sx={deleteButtonStyle}
                  >
                    Delete
                  </Button></TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
        {
          <Button className="logoutButton" component={URLlink} onClick={logoutButton} to="/login" variant="contained" sx={style} white-space='nowrap' min-width='auto'>
            LOGOUT
          </Button>
        }
      </div >
    )
  }
}
export default DashboardPage