frontPanel/src/pages/Questions/DraggableList/DraggableListItem.tsx

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


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

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

    useEffect(() => {
        if (editSomeQuestion !== null) {
            const setI = setInterval(() => {
                let comp = document.getElementById(editSomeQuestion);
                if (comp !== null) {
                    clearInterval(setI);
                    comp.scrollIntoView({ behavior: 'instant' });
                    updateEditSomeQuestion();
                }
            }, 200);

        }
    }, [editSomeQuestion]);

    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={() => {
                                    cancelQuestionDeletion(question.id);
                                }}
                                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;