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 { updateEditSomeQuestion } from "@root/questions/actions"
import { useQuestionsStore } from "@root/questions/store"


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

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

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

        }
        console.log(editSomeQuestion)
    }, [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={() => { // 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;