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

type Props = {
  question: AnyTypedQuizQuestion | UntypedQuizQuestion;
  isDragging: boolean;
  index: number;
  openBranchingPage: boolean;
  setOpenBranchingPage: (a: boolean) => void;
};

const DraggableListItem = memo<Props>(function ({
  question,
  isDragging,
  index,
  openBranchingPage,
  setOpenBranchingPage,
}) {
  const theme = useTheme();
  const editSomeQuestion = useUiTools((state) => state.editSomeQuestion);

  useEffect(() => {
    let counter = 0;
    if (editSomeQuestion !== null) {
      const setI = setInterval(() => {
        counter++;
        let comp = document.getElementById(editSomeQuestion);
        if (comp !== null) {
          clearInterval(setI);
          comp.scrollIntoView({ behavior: "instant" });
          updateEditSomeQuestion();
        }
        if (counter === 20) {
          clearInterval(setI);
          updateEditSomeQuestion();
        }
      }, 200);
    }
  }, [editSomeQuestion]);

  return (
    <Draggable
      draggableId={question.id.toString()}
      index={index}
    >
      {(provided) => (
        <ListItem
          id={question.type === null ? "" : question.content.id}
          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
                openBranchingPage={openBranchingPage}
                setOpenBranchingPage={setOpenBranchingPage}
                question={question}
                draggableProps={provided.dragHandleProps}
                isDragging={isDragging}
              />
            </Box>
          )}
        </ListItem>
      )}
    </Draggable>
  );
});

DraggableListItem.displayName = "DraggableListItem";

export default DraggableListItem;
