import { Box } from "@mui/material";
import { reorderQuestions } from "@root/questions/actions";
import type { DropResult } from "react-beautiful-dnd";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import DraggableListItem from "./DraggableListItem";
import { useQuestionsStore } from "@root/questions/store";


export const DraggableList = () => {
    const { questions } = useQuestionsStore()
    const filteredQuestions = questions.filter((question) => question.type !== "result")
    const onDragEnd = ({ destination, source }: DropResult) => {
        if (destination) reorderQuestions(source.index, destination.index);
    };

    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="droppable-list">
                {(provided, snapshot) => (
                    <Box ref={provided.innerRef} {...provided.droppableProps}>
                        {filteredQuestions.map((question, index) => (
                            <DraggableListItem
                                key={question.id}
                                question={question}
                                isDragging={snapshot.isDraggingOver}
                                index={index}
                            />
                        ))}
                        {provided.placeholder}
                    </Box>
                )}
            </Droppable>
        </DragDropContext>
    );
};