import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
import { Box, ListItem, Typography, useTheme } from "@mui/material";
import { memo } from "react";
import { Draggable } from "react-beautiful-dnd";
import QuestionsPageCard from "./QuestionPageCard";


type Props = {
    question: AnyTypedQuizQuestion | UntypedQuizQuestion;
    isDragging: boolean;
    index: number;
};

function DraggableListItem({ question, isDragging, index }: Props) {
    const theme = useTheme();

    return (
        <Draggable draggableId={question.id.toString()} index={index}>
            {(provided) => (
                <ListItem
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    sx={{ userSelect: "none", padding: 0 }}
                >
                    {question.deleted ? (
                        <Box
                            {...provided.dragHandleProps}
                            sx={{
                                width: "100%",
                                maxWidth: "800px",
                                display: "flex",
                                justifyContent: "center",
                                marginBottom: "40px",
                                gap: "5px",
                            }}
                        >
                            <Typography
                                sx={{
                                    fontSize: "16px",
                                    color: theme.palette.grey2.main,
                                }}
                            >
                                Вопрос удалён.
                            </Typography>
                            <Typography
                                onClick={() => { // TODO
                                    // updateQuestionsList<QuizQuestionBase>(quizId, index, {
                                    //     ...questionData,
                                    //     deleted: false,
                                    // });
                                }}
                                sx={{
                                    cursor: "pointer",
                                    fontSize: "16px",
                                    textDecoration: "underline",
                                    color: theme.palette.brightPurple.main,
                                    textDecorationColor: theme.palette.brightPurple.main,
                                }}
                            >
                                Восстановить?
                            </Typography>
                        </Box>
                    ) : (
                        <Box sx={{ width: "100%", position: "relative" }}>
                            <QuestionsPageCard
                                question={question}
                                draggableProps={provided.dragHandleProps}
                                isDragging={isDragging}
                                index={index}
                            />
                        </Box>
                    )}
                </ListItem>
            )}
        </Draggable>
    );
}

const DraggableListItemMemo = memo(DraggableListItem);

export default DraggableListItemMemo;
