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


export const FormDraggableList = () => {
    const { questions } = useQuestions();

    const onDragEnd = ({ destination, source }: DropResult) => {
        if (destination) reorderQuestions(source.index, destination.index);
    };

    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="droppable-list">
                {(provided) => (
                    <Box ref={provided.innerRef} {...provided.droppableProps}>
                        {questions.map((question, index) => (
                            <FormDraggableListItem
                                key={question.id}
                                question={question}
                                questionIndex={index}
                            />
                        ))}
                        {provided.placeholder}
                    </Box>
                )}
            </Droppable>
        </DragDropContext>
    );
};
