import { Box, Button, Container, Typography } from '@mui/material';
import { quiz } from "../quizData";
import { useSelector } from 'react-redux';
import {useState } from 'react';
import Matching from './Matching';
import type { RootState } from '../../store';
import store from '../../store';
import { useDispatch } from 'react-redux';
import { mixUp, startTesting, stopTesting } from './quizSlice';

function QuizStats() {

  const checkTask = (index: number): string => {
    useSelector((state: RootState) => state.lists.lists[index]);
    let state = store.getState();
    if (state.lists.correctAnswers.length <= index) {
      return "";
    }
    let correctCounter = state.lists.lists[index].reduce((prev, answ, i) => prev + Number(state.lists.correctAnswers[index][i] === answ), 0)

    if (correctCounter == state.lists.lists[index].length) {
      return "все ответы верные"
    }
    return `верно ${correctCounter}/${state.lists.lists[index].length}`

  }
  return (
    <Container sx={{ margin: "auto" }}>
      <h3>Результаты теста</h3>
      <Typography>Задание 1: {checkTask(0)}</Typography>
      <Typography>Задание 2: {checkTask(1)}</Typography>
    </Container>
  )
}


function Quiz() {
  const dispatch = useDispatch();
  const [displayingResults, setDisplayingResults] = useState(false);
  const resetQuiz = () => {
    setDisplayingResults(false);
    dispatch(mixUp());
    dispatch(startTesting());
  }
  const checkQuiz = () => {
    setDisplayingResults(true);
    dispatch(stopTesting());
  }


  return (
    <Container maxWidth="md">
      {quiz.map((item, index) => (
        <Box key={item.id} component="section" sx={{ m: 2, p: 2 }}>
          <Typography variant="h5" gutterBottom>
            {index + 1}. {item.title}
          </Typography>
          <Matching index={index} tasks={item.tasks} />
        </Box>
      ))}

      <Box sx={{ display: 'flex', justifyContent: 'space-around' }}>
        <Button onClick={checkQuiz} variant="contained">Проверить</Button>
        <Button onClick={resetQuiz} variant="contained">Начать снова</Button>
      </Box>
      {displayingResults && <QuizStats />}

    </Container>
  );
}

export default Quiz