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


type FormDraggableListItemProps = {
    question: AnyTypedQuizQuestion | UntypedQuizQuestion;
    questionIndex: number;
};

export default memo(
    ({ question, questionIndex }: FormDraggableListItemProps) => {
        const theme = useTheme();

        return (
            <Draggable draggableId={String(questionIndex)} index={questionIndex}>
                {(provided) => (
                    <ListItem
                        ref={provided.innerRef}
                        {...(questionIndex !== 0 ? provided.draggableProps : {})}
                        sx={{ userSelect: "none", padding: 0 }}
                    >
                        {question.deleted ? (
                            <Box
                                {...provided.dragHandleProps}
                                sx={{
                                    width: "100%",
                                    maxWidth: "800px",
                                    display: "flex",
                                    justifyContent: "center",
                                    marginTop: "30px",
                                    gap: "5px",
                                }}
                            >
                                <Typography
                                    sx={{
                                        fontSize: "16px",
                                        color: theme.palette.grey2.main,
                                    }}
                                >
                                    Вопрос удалён.
                                </Typography>
                                <Typography
                                    onClick={() => {
                                        updateQuestion(question.id, question => {
                                            question.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",
                                    borderBottom: "1px solid rgba(0, 0, 0, 0.23)",
                                }}
                            >
                                <QuestionsPageCard
                                    key={questionIndex}
                                    question={question}
                                    questionIndex={questionIndex}
                                    draggableProps={provided.dragHandleProps}
                                />
                            </Box>
                        )}
                    </ListItem>
                )}
            </Draggable>
        );
    }
);
