import { Grid, List, ListItem, ListItemButton, ListItemText } 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();
  
  // Добавляем список ответов очередного задания в хранилище
  useEffect(() => {
     dispatch(addList({ index, items: answers }));
  }, []);

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

  const answers: string[] = tasks.map((item) => item.answer);
  return (
    <Grid container spacing={2}>
      <Grid size={6}>
        <List>
          {tasks.map((item, index) => (
          <ListItem key={index}>
            <ListItemButton 
              sx={{
                border: '1px solid gray',
                borderRadius: '5px',
                textAlign: 'right',
            }}>
              <ListItemText primary={item.question} />
           </ListItemButton>
          </ListItem> 
          ))}
        </List>
      </Grid>

          <Grid size={6}>
        <SortableList index={index} answers={answers}/>
      </Grid>
    </Grid> 
  );
}

export default Matching