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 as DragDropContextOriginal } from "react-beautiful-dnd";
import { StrictModeDroppable } from "./StrictModeDroppable";

// Исправляем типизацию для DragDropContext
const DragDropContext = DragDropContextOriginal as any;

type AnswerDraggableListProps = {
  questionId: string;
  variants: ReactNode;
};

export const AnswerDraggableList = ({
  questionId,
  variants,
}: AnswerDraggableListProps) => {
  const onDragEnd = ({ destination, source }: DropResult) => {
    // Проверяем наличие необходимых данных
    if (!destination || !source) return;
    
    // Проверяем, что индексы действительно изменились
    if (destination.index === source.index) return;

    // Проверяем валидность индексов
    if (source.index < 0 || destination.index < 0) return;

    try {
      reorderQuestionVariants(questionId, source.index, destination.index);
    } catch (error) {
      console.error('Error reordering variants:', error);
      // Здесь можно добавить уведомление пользователю об ошибке
    }
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <StrictModeDroppable droppableId="droppable-answer-list">
        {(provided) => (
          <Box 
            ref={provided.innerRef} 
            {...provided.droppableProps}
          >
            {variants}
            {provided.placeholder}
          </Box>
        )}
      </StrictModeDroppable>
    </DragDropContext>
  );
};
