import { DndContext, closestCenter } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
import { useDispatch, useSelector } from 'react-redux';
import { setDraggedItems } from './quizSlice';
import type { RootState } from '../../store';
import List from '@mui/material/List';
import { SortableItem } from '../components/SortableItem'

interface ComponentProps {
  index: number;
  answers: string[];
}

function SortableList({ index}: ComponentProps) {

  const dispatch = useDispatch();
  const arr = useSelector((state: RootState) => state.lists.lists[index])
  const isDisabled = useSelector((state: RootState) => state.lists.isTestingDone)
  const draggedItems = arr || []; 

  const handleDragEnd = (event: any) => {
    const { active, over } = event;
    if (active.id !== over.id) {
       const oldIndex = draggedItems.indexOf(active.id);
       const newIndex = draggedItems.indexOf(over.id);
       const newList = arrayMove(draggedItems, oldIndex, newIndex);
       dispatch(setDraggedItems({ index, items: newList }));
    } 
  };

  return (
    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
      <SortableContext items={draggedItems}
        strategy={verticalListSortingStrategy}>
        <List>
          {draggedItems.map((item) => (
            <SortableItem key={item} item={item} id={item} isDisabled={isDisabled}/>
          ))}
        </List>
      </SortableContext>
    </DndContext>
  );
}

export default SortableList;