import { AnyTypedQuizQuestion } from "@frontend/squzanswerer";
import { ReactComponent as CheckedIcon } from "@icons/checked.svg";
import { UntypedQuizQuestion } from "@model/questionTypes/shared";
import { Box, Button, IconButton, Typography } from "@mui/material";
import { useQuestionsStore } from "@root/questions/store";
import { updateDragQuestionContentId, updateEditSomeQuestion } from "@root/uiTools/actions";
import { useUiTools } from "@root/uiTools/store";
import { useEffect } from "react";
import { Pencil } from "../../../ui_kit/Sidebar/icons/Pencil";

const getItemStyle = (isDragging: any, draggableStyle: any) => ({
  userSelect: "none",
  padding: 5 * 2,
  margin: `0 0 5px 0`,

  background: isDragging ? "lightgreen" : "grey",

  ...draggableStyle,
});
type AnyQuestion = UntypedQuizQuestion | AnyTypedQuizQuestion;

interface Props {
  setOpenBranchingPage?: () => void;
}

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

  useEffect(() => {
    if (desireToOpenABranchingModal) {
      const element = document.getElementById(desireToOpenABranchingModal);
      if (element !== null) element.scrollIntoView();
    }
  }, [desireToOpenABranchingModal]);

  return (
    <Box sx={{ padding: "15px" }}>
      <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 && q.type !== "result")
          .map(({ title, content }, index) => {
            return (
              <Button
                id={content.id}
                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)' strokeWidth='2' stroke-dasharray='8 8' stroke-dashoffset='0' strokeLinecap='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={() => {
                    setOpenBranchingPage();
                    updateEditSomeQuestion(content.id);
                  }}
                >
                  <Pencil style={{ color: "#7e2aea" }} />
                </IconButton>
                {content.rule.parentId && <CheckedIcon />}
              </Button>
            );
          })}
      </Box>
    </Box>
  );
};
