frontPanel/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx

import {
  Box,
  Button,
  LinearProgress,
  Paper,
  Typography,
  FormControl,
  Select as MuiSelect,
  MenuItem,
  useTheme,
} from "@mui/material";
import { useQuestionsStore } from "@root/questions/store";
import {
  decrementCurrentQuestionIndex,
  incrementCurrentQuestionIndex,
  useQuizPreviewStore,
  setCurrentQuestionIndex,
} from "@root/quizPreview";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "model/questionTypes/shared";
import { useEffect } from "react";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import Date from "./QuizPreviewQuestionTypes/Date";
import Emoji from "./QuizPreviewQuestionTypes/Emoji";
import File from "./QuizPreviewQuestionTypes/File";
import Images from "./QuizPreviewQuestionTypes/Images";
import Number from "./QuizPreviewQuestionTypes/Number";
import Page from "./QuizPreviewQuestionTypes/Page";
import Rating from "./QuizPreviewQuestionTypes/Rating";
import Select from "./QuizPreviewQuestionTypes/Select";
import Text from "./QuizPreviewQuestionTypes/Text";
import Variant from "./QuizPreviewQuestionTypes/Variant";
import Varimg from "./QuizPreviewQuestionTypes/Varimg";
import { notReachable } from "../../utils/notReachable";
import ArrowDownIcon from "@icons/ArrowDownIcon";

export default function QuizPreviewLayout() {
  const theme = useTheme();
  const questions = useQuestionsStore((state) => state.questions);
  const currentQuizStep = useQuizPreviewStore((state) => state.currentQuestionIndex);

  const nonDeletedQuizQuestions = questions.filter((question) => !question.deleted);
  const maxCurrentQuizStep = nonDeletedQuizQuestions.length > 0 ? nonDeletedQuizQuestions.length - 1 : 0;
  const currentProgress = Math.floor((currentQuizStep / maxCurrentQuizStep) * 100);

  const currentQuestion = nonDeletedQuizQuestions[currentQuizStep];

  useEffect(
    function resetCurrentQuizStep() {
      if (currentQuizStep > maxCurrentQuizStep) {
        decrementCurrentQuestionIndex();
      }
    },
    [currentQuizStep, maxCurrentQuizStep]
  );

  return (
    <Paper
      className="quiz-preview-draghandle"
      data-cy="quiz-preview-layout"
      sx={{
        height: "100%",
        display: "flex",
        flexDirection: "column",
        flexGrow: 1,
        borderRadius: "12px",
        pointerEvents: "auto",
      }}
    >
      <Box
        sx={{
          p: "40px 20px 20px",
          whiteSpace: "break-spaces",
          overflowY: "auto",
          flexGrow: 1,
          "&::-webkit-scrollbar": { width: 0, display: "none" },
          msOverflowStyle: "none",
          scrollbarWidth: "none",
        }}
      >
        <QuestionPreviewComponent question={currentQuestion} />
      </Box>
      <Box
        sx={{
          mt: "auto",
          p: "16px",
          borderTop: "1px solid #E3E3E3",
        }}
      >
        <Box sx={{ marginBottom: "10px" }}>
          <FormControl fullWidth size="small" sx={{ width: "100%", minWidth: "200px", height: "48px" }}>
            <MuiSelect
              id="category-select"
              variant="outlined"
              value={currentQuizStep}
              placeholder="Заголовок вопроса"
              onChange={({ target }) => setCurrentQuestionIndex(window.Number(target.value))}
              sx={{
                height: "48px",
                borderRadius: "8px",
                "& .MuiOutlinedInput-notchedOutline": {
                  border: `1px solid ${theme.palette.brightPurple.main} !important`,
                },
              }}
              MenuProps={{
                PaperProps: {
                  sx: {
                    mt: "8px",
                    p: "4px",
                    borderRadius: "8px",
                    border: "1px solid #EEE4FC",
                    boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
                  },
                },
                MenuListProps: {
                  sx: {
                    py: 0,
                    display: "flex",
                    flexDirection: "column",
                    gap: "8px",
                    "& .Mui-selected": {
                      backgroundColor: theme.palette.background.default,
                      color: theme.palette.brightPurple.main,
                    },
                  },
                },
              }}
              inputProps={{
                sx: {
                  color: theme.palette.brightPurple.main,
                  display: "flex",
                  alignItems: "center",
                  px: "9px",
                  gap: "20px",
                },
              }}
              IconComponent={(props) => <ArrowDownIcon {...props} />}
            >
              {Object.values(questions).map(({ id, title }, index) => (
                <MenuItem
                  key={id}
                  value={index}
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    gap: "20px",
                    p: "4px",
                    borderRadius: "5px",
                    color: theme.palette.grey2.main,
                  }}
                >
                  {`${index + 1}. ${title}`}
                </MenuItem>
              ))}
            </MuiSelect>
          </FormControl>
        </Box>
        <Box sx={{ display: "flex", alignItems: "center" }}>
          <Box
            sx={{
              flexGrow: 1,
              display: "flex",
              flexDirection: "column",
              gap: 1,
            }}
          >
            <Typography>
              {nonDeletedQuizQuestions.length > 0
                ? `Вопрос ${currentQuizStep + 1} из ${nonDeletedQuizQuestions.length}`
                : "Нет вопросов"}
            </Typography>
            {nonDeletedQuizQuestions.length > 0 && (
              <LinearProgress
                variant="determinate"
                value={currentProgress}
                sx={{
                  "&.MuiLinearProgress-colorPrimary": {
                    backgroundColor: "fadePurple.main",
                  },
                  "& .MuiLinearProgress-barColorPrimary": {
                    backgroundColor: "brightPurple.main",
                  },
                }}
              />
            )}
          </Box>
          <Box
            sx={{
              ml: 2,
              display: "flex",
              gap: 1,
            }}
          >
            <Button
              variant="outlined"
              onClick={decrementCurrentQuestionIndex}
              disabled={currentQuizStep === 0}
              sx={{ px: 1, minWidth: 0 }}
            >
              <ArrowLeft />
            </Button>
            <Button
              variant="contained"
              onClick={() => incrementCurrentQuestionIndex(maxCurrentQuizStep)}
              disabled={currentQuizStep >= maxCurrentQuizStep}
            >
              Далее
            </Button>
          </Box>
        </Box>
      </Box>
    </Paper>
  );
}

function QuestionPreviewComponent({ question }: { question: AnyTypedQuizQuestion | UntypedQuizQuestion | undefined }) {
  if (!question || question.type === null) return null;

  switch (question.type) {
    case "variant":
      return <Variant question={question} />;
    case "images":
      return <Images question={question} />;
    case "varimg":
      return <Varimg question={question} />;
    case "emoji":
      return <Emoji question={question} />;
    case "text":
      return <Text question={question} />;
    case "select":
      return <Select question={question} />;
    case "date":
      return <Date question={question} />;
    case "number":
      return <Number question={question} />;
    case "file":
      return <File question={question} />;
    case "page":
      return <Page question={question} />;
    case "rating":
      return <Rating question={question} />;
    default:
      notReachable(question);
  }
}