import { useParams } from "react-router-dom";
import { Box, Button, IconButton, Typography } from "@mui/material";
import { ReactComponent as CheckedIcon } from "@icons/checked.svg";
import { useQuestionsStore } from "@root/questions/store";
import { updateDragQuestionContentId } from "@root/questions/actions";
import { useEffect } from "react";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
import { Pencil } from "../../startPage/Sidebar/icons/Pencil";
import {updateOpenBranchingPanel, updateEditSomeQuestion} from "@root/questions/actions"


const getItemStyle = (isDragging: any, draggableStyle: any) => ({
  // some basic styles to make the items look a bit nicer
  userSelect: "none",
  padding: 5 * 2,
  margin: `0 0 5px 0`,

  // change background colour if dragging
  background: isDragging ? "lightgreen" : "grey",

  // styles we need to apply on draggables
  ...draggableStyle
});
type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion

export const QuestionsList = () => {
  const { desireToOpenABranchingModal } = useQuestionsStore()
  const trashQuestions = useQuestionsStore().questions
  const questions = trashQuestions.filter((question) => question.type !== "result")

  return (
    <Box sx={{ padding: "15px" }}>
      <Typography
        sx={{ fontSize: "12px", color: "#9A9AAF", marginBottom: "5px" }}
      >
        Перетащите вопросы в карту ветвления
      </Typography>
      <Box
        sx={{
          maxHeight: "400px",
          overflowY: "scroll",
          paddingRight: "12px",
          "&::-webkit-scrollbar": { width: "8px" },
          "&::-webkit-scrollbar-track": {
            background: "#D4D4DF",
            borderRadius: "4px",
          },
          "&::-webkit-scrollbar-thumb": {
            boxSizing: "border-box",
            background: "#9A9AAF",
            borderRadius: "4px",
            border: "1.5px solid transparent",
            backgroundClip: "padding-box",
          },
        }}
      >
        {/* тут нужно будет фильтровать с проверкой, что вопрос имеет тип*/}
        {questions.filter((q: AnyQuestion) => q.type).map(({ title, content }, index) => (
          <Button
            onMouseDown={() => {//Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
              if (!content.rule.parentId) updateDragQuestionContentId(content.id)
            }}
            key={index}
            sx={{
              width: "100%",
              cursor: "pointer",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              padding: "12px",
              background: "#FFFFFF",
              borderRadius: "8px",
              border: desireToOpenABranchingModal === content.id ? "4px solid #7e2aea" : "none",
              marginBottom: "20px",
              boxShadow: "0px 10px 30px #e7e7e7",
              backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' stroke-width='2' stroke-dasharray='8 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  border-radius: 8px;`,
              "&:last-child": { marginBottom: 0 },
            }}
          >
            <Typography sx={{ width: "100%", color: content.rule.parentId ? "#9A9AAF" : "#000" }}>
              {title || "нет заголовка"}
            </Typography>
            <IconButton
              onClick={() => {
                updateOpenBranchingPanel(false)
                updateEditSomeQuestion(content.id)
              }}
            >
              <Pencil style={{color: "#7e2aea"}}/>
            </IconButton>
            {content.rule.parentId && <CheckedIcon />}
          </Button>


        ))}
      </Box>
    </Box>
  );
}