import { Draggable } from "react-beautiful-dnd";
import { Box, ListItem } from "@mui/material";

import QuestionsPageCard from "./QuestionPageCard";

import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg";

type DraggableListItemProps = {
  index: number;
  dropPlaceIndex: number;
};

export const DraggableListItem = ({
  index,
  dropPlaceIndex,
}: DraggableListItemProps) => (
  <Draggable draggableId={String(index)} index={index}>
    {(provided, snapshot) => (
      <ListItem ref={provided.innerRef} {...provided.draggableProps}>
        <Box sx={{ width: "100%", position: "relative" }}>
          <QuestionsPageCard
            key={index}
            totalIndex={index}
            draggableProps={provided.dragHandleProps}
          />
          {dropPlaceIndex === index && !snapshot.mode && (
            <Box
              sx={{
                position: "absolute",
                bottom: "-10px",
                display: "flex",
                width: "100%",
                maxWidth: "825px",
                alignItems: "center",
                columnGap: "10px",
              }}
            >
              <Box
                sx={{
                  boxSizing: "border-box",
                  width: "100%",
                  height: "1px",
                  backgroundPosition: "bottom",
                  backgroundRepeat: "repeat-x",
                  backgroundSize: "20px 1px",
                  backgroundImage:
                    "radial-gradient(circle, #7E2AEA 6px, #F2F3F7 1px)",
                }}
              />
              <PlusIcon />
            </Box>
          )}
        </Box>
      </ListItem>
    )}
  </Draggable>
);