import { Box } from "@mui/material";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import DraggableListItem from "./DraggableListItem";
import type { DropResult } from "react-beautiful-dnd";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuestionArray } from "@root/questions/hooks";
import useSWR from "swr";
import { questionApi } from "@api/question";
import { setQuestions } from "@root/questions/actions";
import { isAxiosError } from "axios";
import { devlog } from "@frontend/kitui";
import { enqueueSnackbar } from "notistack";


export const DraggableList = () => {
    const { quiz } = useCurrentQuiz();
    useSWR(["questions", quiz?.id], ([, id]) => questionApi.getList({ quiz_id: id }), {
        onSuccess: setQuestions,
        onError: error => {
            const message = isAxiosError<string>(error) ? (error.response?.data ?? "") : "";

            devlog("Error getting question list", error);
            enqueueSnackbar(`Не удалось получить вопросы. ${message}`);
        }
    });
    const questions = useQuestionArray();

    const onDragEnd = ({ destination, source }: DropResult) => { // TODO
        // if (destination) {
        //     const newItems = reorder(
        //         listQuestions[quizId],
        //         source.index,
        //         destination.index
        //     );

        //     updateQuestionsListDragAndDrop(quizId, newItems);
        // }
    };

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