import { Box, Button, IconButton, Typography, useTheme } from "@mui/material";
import {
  collapseAllQuestions,
  createUntypedQuestion,
} from "@root/questions/actions";
import {
  decrementCurrentStep,
  incrementCurrentStep,
} from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { updateEditSomeQuestion } from "@root/uiTools/actions";
import { useUiTools } from "@root/uiTools/store";
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
import { useLayoutEffect, useRef } from "react";
import { createPortal } from "react-dom";
import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal";
import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool";

interface Props {
  openBranchingPage: boolean;
  setOpenBranchingPage: (a: boolean) => void;
  widthMain: number;
}

export default function QuestionsPage({
  openBranchingPage,
  setOpenBranchingPage,
  widthMain,
}: Props) {
  const theme = useTheme();
  const { openedModalSettingsId } = useUiTools();
  const quiz = useCurrentQuiz();
  useLayoutEffect(() => {
    updateEditSomeQuestion();
  }, []);

  if (!quiz) return null;

  return (
    <>
      <Box
        id="QuestionsPage"
        sx={{
          maxWidth: "796px",
          width: "100%",
          display: "flex",
          justifyContent: "space-between",
          margin: "60px 0 40px 0",
        }}
      >
        <Typography variant={"h5"} sx={{ wordBreak: "break-word" }}>
          {quiz.name ? quiz.name : "Заголовок quiz"}
        </Typography>
        {!openBranchingPage && (
          <Button
            sx={{
              fontSize: "16px",
              lineHeight: "19px",
              padding: 0,
              textDecoration: "underline",
              color: theme.palette.brightPurple.main,
              textDecorationColor: theme.palette.brightPurple.main,
            }}
            onClick={collapseAllQuestions}
          >
            Свернуть всё
          </Button>
        )}
      </Box>
      <QuestionSwitchWindowTool
        openBranchingPage={openBranchingPage}
        setOpenBranchingPage={setOpenBranchingPage}
        widthMain={widthMain}
      />
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          maxWidth: "796px",
          position: "relative",
        }}
      >
        {!openBranchingPage && (
          <IconButton
            onClick={() => createUntypedQuestion(quiz.backendId)}
            sx={{ position: "fixed", bottom: "103px" }}
            data-cy="create-question"
          >
            <AddPlus />
          </IconButton>
        )}
        <Box sx={{ display: "flex", gap: "8px", marginLeft: "auto" }}>
          <Button
            variant="outlined"
            sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
            data-cy="back-button"
            onClick={decrementCurrentStep}
          >
            <ArrowLeft />
          </Button>
          <Button
            data-cy="next-step"
            variant="contained"
            sx={{
              height: "44px",
              padding: "10px 20px",
              borderRadius: "8px",
              background: theme.palette.brightPurple.main,
              fontSize: "18px",
            }}
            onClick={incrementCurrentStep}
          >
            Следующий шаг
          </Button>
        </Box>
      </Box>
      {createPortal(<QuizPreview />, document.body)}
      {openedModalSettingsId !== null && <BranchingQuestions />}
    </>
  );
}