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


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 = useQuestionsStore(state => state.questions);

    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}>
                        {questions.map((question, index) => (
                            <DraggableListItem
                                key={question.id}
                                question={question}
                                isDragging={snapshot.isDraggingOver}
                                index={index}
                            />
                        ))}
                        {provided.placeholder}
                    </Box>
                )}
            </Droppable>
        </DragDropContext>
    );
};