import { Box, Modal, Button, Typography } from "@mui/material";
import { useQuestionsStore } from "@root/questions/store";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";

interface Props {
  openedModalQuestions: boolean;
  setModalQuestionTargetContentId: (contentId: string) => void;
  setOpenedModalQuestions: (open: boolean) => void;
}

export const BranchingQuestionsModal = ({
  openedModalQuestions,
  setOpenedModalQuestions,
  setModalQuestionTargetContentId,
}: Props) => {
  const { questions } = useQuestionsStore();

  const handleClose = () => {
    setOpenedModalQuestions(false);
  };

  const typedQuestions: AnyTypedQuizQuestion[] = questions.filter(
    (question) => question.type && !question.content.rule.parentId
  ) as AnyTypedQuizQuestion[];

  return (
    <Modal open={openedModalQuestions} onClose={handleClose}>
      <Box
        sx={{
          position: "absolute",
          overflow: "hidden",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          maxWidth: "620px",
          width: "100%",
          bgcolor: "background.paper",
          borderRadius: "12px",
          boxShadow: 24,
          padding: "30px 0",
        }}
      >
        <Box sx={{ margin: "0 auto", maxWidth: "350px" }}>
          {typedQuestions.map((question) => (
            <Button
              key={question.content.id}
              onClick={() => {
                setModalQuestionTargetContentId(question.content.id);
                handleClose();
              }}
              sx={{
                width: "100%",
                cursor: "pointer",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                padding: "12px",
                background: "#FFFFFF",
                borderRadius: "8px",
                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: "#000",
                }}
              >
                {question.title || "нет заголовка"}
              </Typography>
            </Button>
          ))}
        </Box>
      </Box>
    </Modal>
  );
};