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 { questionStore, updateQuestionsList } from "@root/questions";

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

export const DraggableListItem = ({
  index,
  isDragging,
}: DraggableListItemProps) => {
  const quizId = Number(useParams().quizId);
  const { listQuestions } = questionStore();
  const theme = useTheme();

  return (
    <Draggable draggableId={String(index)} index={index}>
      {(provided) => (
        <ListItem
          ref={provided.innerRef}
          {...provided.draggableProps}
          sx={{ userSelect: "none", padding: 0 }}
        >
          {listQuestions[quizId][index].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(quizId, index, {
                    ...listQuestions[quizId][index],
                    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>
  );
};