import { memo } from "react";
import { useParams } from "react-router-dom";
import { Draggable } from "react-beautiful-dnd";
import { Box, ListItem, Typography, useTheme } from "@mui/material";

import QuestionsPageCard from "./QuestionPageCard";

import { updateQuestionsList } from "@root/questions";

import { QuizQuestionBase } from "../../../model/questionTypes/shared";

type DraggableListItemProps = {
  index: number;
  isDragging: boolean;
  questionData: QuizQuestionBase;
};

export default memo(
  ({ index, isDragging, questionData }: DraggableListItemProps) => {
    const quizId = Number(useParams().quizId);
    const theme = useTheme();
    console.log("Мой индекс " + index);
    console.log(questionData);

    return (
      <Draggable draggableId={String(index)} index={index}>
        {(provided) => (
          <ListItem
            ref={provided.innerRef}
            {...provided.draggableProps}
            sx={{ userSelect: "none", padding: 0 }}
          >
            {questionData.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={() => {
                    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
                  key={index}
                  totalIndex={index}
                  draggableProps={provided.dragHandleProps}
                  isDragging={isDragging}
                />
              </Box>
            )}
          </ListItem>
        )}
      </Draggable>
    );
  }
);