import { Box } from "@mui/material";
import { reorderQuestionVariants } from "@root/questions/actions";
import { type ReactNode } from "react";
import type { DropResult } from "react-beautiful-dnd";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import type { QuestionVariant, QuizQuestionsWithVariants } from "../../../model/questionTypes/shared";
import { AnswerItem } from "./AnswerItem";


type AnswerDraggableListProps = {
    question: QuizQuestionsWithVariants;
    additionalContent?: (variant: QuestionVariant, index: number) => ReactNode;
    additionalMobile?: (variant: QuestionVariant, index: number) => ReactNode;
};

export const AnswerDraggableList = ({
    question,
    additionalContent,
    additionalMobile,
}: AnswerDraggableListProps) => {
    const onDragEnd = ({ destination, source }: DropResult) => {
        if (destination) {
            reorderQuestionVariants(question.id, source.index, destination.index);
        }
    };

    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="droppable-answer-list">
                {(provided) => (
                    <Box ref={provided.innerRef} {...provided.droppableProps}>
                        {question.content.variants.map((variant, index) => (
                            <AnswerItem
                                key={variant.id}
                                index={index}
                                questionId={question.id}
                                largeCheck={("largeCheck" in question.content) ? question.content.largeCheck : false}
                                variant={variant}
                                additionalContent={additionalContent?.(variant, index)}
                                additionalMobile={additionalMobile?.(variant, index)}
                            />
                        ))}
                        {provided.placeholder}
                    </Box>
                )}
            </Droppable>
        </DragDropContext>
    );
};
