import { Box, Paper } from "@mui/material";
import { createUntypedQuestion } from "@root/questions/actions";
import { useState } from "react";
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
import { ReactComponent as PlusIcon } from "@/assets/icons/plus.svg";
import type { UntypedQuizQuestion } from "../../../model/questionTypes/shared";
import SwitchQuestionsPage from "../SwitchQuestionsPage";
import TypeQuestions from "../TypeQuestions";
import QuestionPageCardTitle from "./QuestionPageCardTitle";
import { AnyTypedQuizQuestion } from "@frontend/squzanswerer";

interface Props {
  question: AnyTypedQuizQuestion | UntypedQuizQuestion;
  draggableProps: DraggableProvidedDragHandleProps | null | undefined;
  isDragging: boolean;
  openBranchingPage: boolean;
  setOpenBranchingPage: (a: boolean) => void;
}

export default function QuestionsPageCard({
  question,
  draggableProps,
  isDragging,
  openBranchingPage,
  setOpenBranchingPage,
}: Props) {
  const [plusVisible, setPlusVisible] = useState<boolean>(false);

  return (
    <>
      <Paper
        id={question.id}
        data-cy="quiz-question-card"
        sx={{
          maxWidth: "796px",
          width: "100%",
          borderRadius: "12px",
          backgroundColor: question.expanded ? "white" : "#EEE4FC",
          border: question.expanded ? "none" : "1px solid #9A9AAF",
          boxShadow: "0px 10px 30px #e7e7e7",
        }}
      >
        <QuestionPageCardTitle
          draggableProps={draggableProps}
          quizId={question.quizId}
          questionId={question.id}
          questionBackendId={question.backendId}
          questionContentId={"content" in question ? question.content.id : null}
          title={question.title}
          questionType={question.type}
          page={"page" in question ? question.page : null}
          isExpanded={question.expanded}
          questionHasParent={"content" in question ? question.content.rule.parentId.length > 0 : false}
        />
        {question.expanded && (
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              padding: 0,
              borderRadius: "12px",
            }}
          >
            {question.type === null ? (
              <TypeQuestions question={question} />
            ) : (
              <SwitchQuestionsPage
                question={question}
                openBranchingPage={openBranchingPage}
                setOpenBranchingPage={setOpenBranchingPage}
              />
            )}
          </Box>
        )}
      </Paper>
      <Box
        onMouseEnter={() => setPlusVisible(true)}
        onMouseLeave={() => setPlusVisible(false)}
        sx={{
          maxWidth: "825px",
          display: "flex",
          alignItems: "center",
          height: "40px",
          cursor: "pointer",
        }}
      >
        <Box
          onClick={() => createUntypedQuestion(question.quizId, question.id)}
          sx={{
            display: plusVisible && !isDragging ? "flex" : "none",
            width: "100%",
            alignItems: "center",
            columnGap: "10px",
          }}
          data-cy="create-question"
        >
          <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>
    </>
  );
}