import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import playerService from '../BackendRequests/playerRequest.jsx'
import { Typography } from '@mui/material'
import { getAnswerTime } from '../helpers'

const PlayerResult = ({ playerId }) => {
  const [results, setResults] = useState([])
  const getResult = async () => {
    try {
      const res = await playerService.getQuizResult(playerId)
      console.log(res)
      setResults(res)
    } catch (err) {
      console.log(err)
    }
  }

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

  const checkAnswer = (correct) => {
    if (correct) return (<Typography display='inline'>Correct!</Typography>)
    else return (<Typography display='inline'>Incorrect!</Typography>)
  }

  const countCorrect = results.filter((r) => r.correct === true).length;
  return (
    <>
      <Typography fontWeight='bold'>Here are your results: </Typography>
      <Typography>You answered {countCorrect} out of {results.length} correctly.</Typography>
      {results && results.map((r, index) => {
        const timeTaken = getAnswerTime(r.questionStartedAt, r.answeredAt)
        return (
          <div key={index}>
            <Typography display='inline'>Question {index + 1}: {checkAnswer(r.correct)}</Typography>
            <Typography display='inline'> Answered in {timeTaken} seconds.</Typography>
          </div>
        )
      })}
    </>
  );
}

PlayerResult.propTypes = {
  playerId: PropTypes.number
}

export default PlayerResult