import { Grid} from '@mui/material';
import type { tTasks } from "../quizData"
import SortableList from '../features/SortableList';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { addList, mixUp } from './quizSlice';
interface ComponentProps {
  tasks: tTasks;
  index: number;
}

function Matching({ tasks, index }: ComponentProps) {
  const dispatch = useDispatch();
  const answers: string[] = tasks.map((item) => String(item.answer));
  // Добавляем список ответов очередного задания в хранилище
  useEffect(() => {
    dispatch(addList({ index, items: answers, answers:answers,questions:tasks.map((item) => String(item.question)), quizType: "M" }));
  }, []);

  useEffect(() => {
    dispatch(mixUp());
  }, []);



  return (
    <Grid container spacing={2}>
      <Grid size={12}>
        <SortableList index={index} answers={answers} />
      </Grid>
    </Grid>
  );
}

export default Matching