// editGamePage.jsx
import React, { useEffect, useState } from 'react'
import { Link as URLlink, useParams } from 'react-router-dom'
import {
  Box, Button, Typography, TextField, Input, CssBaseline, Paper,
  TableContainer, Table, TableRow, TableBody, TableCell,
} from '@mui/material'
import gameDataService from '../BackendRequests/gameData'
import editGameService from '../BackendRequests/editGame'
import { fileToDataUrl } from '../helpers.js'
import image from '../QUIZ.png'
import loginService from '../BackendRequests/login'

const style = {
  position: 'absolute',
  top: '1%',
  backgroundColor: '#a2627c',
  '&:hover': {
    background: '#a2627c',
  }
}
const saveButtonStyle = {
  mt: 3,
  backgroundColor: '#d0605e',
  '&:hover': {
    background: '#d0605e',
  }
}
const deleteButtonStyle = {
  backgroundColor: '#d0605e',
  color: 'white',
  '&:hover': {
    background: 'transparent',
    color: 'black',
  },
}
const EditGamePage = () => {
  const gameId = useParams().gId;
  const token = localStorage.getItem('token');
  const [questions, setQuestions] = useState([]);
  const [quizName, setQuizName] = useState('');
  const [thumbnail, setThumbNail] = useState('');
  const defaultImage = image

  const renderGameData = async () => {
    setQuizName('')
    setQuestions('')
    const data = await gameDataService.getQuizData(token, gameId);
    setQuestions(data.questions);
    setQuizName(data.name)
    // set default thumbnail here, change to something better later
    data.thumbnail === null
      ? setThumbNail(defaultImage)
      : setThumbNail(data.thumbnail);
    console.log(data.questions);
  }

  useEffect(() => {
    renderGameData();
  }, []);

  const uploadThumbnail = async (e) => {
    const thumbnailUrl = await fileToDataUrl(e.target.files[0]);
    setThumbNail(thumbnailUrl);
  }

  const handleEdit = async () => {
    const res = await editGameService.editQuiz(
      token, gameId, questions, quizName, thumbnail
    )
    console.log(res)
  }

  const min = 1;
  const max = 100;
  const [question, setQuestion] = useState('');
  const createQuestion = () => {
    const newQuestion = {
      qId: Math.floor(min + (Math.random() * (max - min))),
      content: question,
      points: 0,
      timeLimit: 0,
      attachmentType: 'None',
      questionType: 'Single Choice',
      answers: [],
    };
    const newQuestions = [...questions];
    newQuestions.push(newQuestion);
    setQuestions(newQuestions);
  }

  const deleteQButton = async (questionID) => {
    console.log(questions)
    console.log(questionID)
    const newArray = questions.filter((item) => {
      console.log(item.qId)
      return item.qId !== questionID
    })
    setQuestions(newArray)
    return newArray
  }

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

  return (
    <>
      <Button component={URLlink} to="/dashboard" variant="contained" sx={style} left='8%' className="backToDashboard">
        &lt; Back to dashboard
      </Button>

      <Box component="form"
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#F5F5F5',
        }}>
        <CssBaseline />
        <Paper style={{ display: 'grid', gridRowGap: '10px', padding: '20px', paddingLeft: '100px', paddingRight: '100px' }}>
          <Typography>Edit Quiz Name</Typography>
          <TextField
            margin="normal"
            id="quizName"
            label={quizName}
            name="quizName"
            autoFocus
            onChange={({ target }) => setQuizName(target.value)}
          />

          <Typography>
            Edit Quiz Thumbnail:
          </Typography>
          <img src={thumbnail} width="120" height="120"></img>
          <br />
          <Input type='file' onChange={(e) => uploadThumbnail(e)} />
          <br />
          <Typography>Questions:</Typography>
          <TableContainer>
            <Table>
              <TableBody>
                {questions && questions.map((question) => (
                  <TableRow key={question.qId}>
                    <TableCell>{question.content && question.content}</TableCell>
                    <TableCell><Button className="editQuesButton" component={URLlink} to={'/edit/game/' + gameId + '/' + question.qId} sx={deleteButtonStyle}>Edit</Button></TableCell>
                    <TableCell><Button className="deleteQuesButton" onClick={() => deleteQButton(question.qId)} sx={deleteButtonStyle}>
                      Delete
                    </Button></TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
          <Typography fontWeight='bold' style={{ marginTop: '8px' }}>
            <TextField type="text" label="Add Question" onChange={e => setQuestion(e.target.value)} className="questionInput" />
            <Button
              onClick={createQuestion}
              variant="contained"
              style = {{ backgroundColor: '#d0605e', }}
              className="addQuestionButton" >
                Add Question
            </Button>
          </Typography>
          <Typography>Click on &apos;Save changes&apos; to confirm addition or deletion of questions</Typography>
          <Button
            variant="contained"
            sx={saveButtonStyle}
            onClick={handleEdit}
            className="saveButton"
          >
            Save Changes
          </Button>
        </Paper>
      </Box>
      {
        <Button component={URLlink} style={{
          position: 'absolute',
          right: 0,
          top: '1%'
        }} onClick={logoutButton} to="/login" variant="contained" sx={style}>
          LOGOUT
        </Button>
      }
    </>
  )
}

export default EditGamePage;