frontPanel/src/pages/ViewPublicationPage/StartPageViewPublication.tsx

import { useParams } from "react-router-dom";
import {
  Box,
  Button,
  Typography,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import useSWR from "swr";
import { isAxiosError } from "axios";
import { enqueueSnackbar } from "notistack";
import { devlog } from "@frontend/kitui";

import { quizApi } from "@api/quiz";

import { useQuizStore } from "@root/quizes/store";
import { useQuestions } from "@root/questions/hooks";
import { setQuizes } from "@root/quizes/actions";

type StartPageViewPublicationProps = {
  setStepNumber: (step: number) => void;
  showNextButton: boolean;
};

export const StartPageViewPublication = ({
  setStepNumber,
  showNextButton,
}: StartPageViewPublicationProps) => {
  const quizId = Number(useParams().quizId);
  const { quizes } = useQuizStore();
  const { questions } = useQuestions();
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(630));
  const quiz = quizes.find(({ backendId }) => quizId === backendId);
  const isMediaFileExist =
    quiz?.config.startpage.background.desktop ||
    quiz?.config.startpage.background.video;

  useSWR("quizes", () => quizApi.getList(), {
    onSuccess: setQuizes,
    onError: (error: unknown) => {
      const message = isAxiosError<string>(error)
        ? error.response?.data ?? ""
        : "";

      devlog("Error getting quiz list", error);
      enqueueSnackbar(`Не удалось получить квизы. ${message}`);
    },
  });

  return (
    <Box
      sx={{
        height: "100vh",
        display: "flex",
        flexDirection:
          quiz?.config.startpage.position === "left" ? "row" : "row-reverse",
        flexGrow: 1,
        "&::-webkit-scrollbar": { width: 0 },
      }}
    >
      <Box
        sx={{
          width: isMediaFileExist && !isTablet ? "40%" : "100%",
          padding: "16px",
          display: "flex",
          flexDirection: "column",
          alignItems: isMediaFileExist && !isTablet ? "flex-start" : "center",
        }}
      >
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            gap: "20px",
          }}
        >
          {quiz?.config.startpage.background.mobile && (
            <img
              src={quiz.config.startpage.background.mobile}
              style={{
                height: "50px",
                maxWidth: "100px",
                objectFit: "cover",
              }}
              alt=""
            />
          )}
          <Typography sx={{ fontSize: "18px" }}>
            {quiz?.config.info.orgname}
          </Typography>
        </Box>
        <Box
          sx={{
            flexGrow: 1,
            display: "flex",
            gap: "10px",
            flexDirection: "column",
            justifyContent: "center",
          }}
        >
          <Typography sx={{ fontWeight: "bold", fontSize: "20px" }}>
            {quiz?.name}
          </Typography>
          <Typography sx={{ fontSize: "16px" }}>
            {quiz?.config.startpage.description}
          </Typography>
          <Box>
            <Button
              variant="contained"
              sx={{ fontSize: "16px", padding: "10px 15px" }}
              disabled={!questions.length}
              onClick={() => setStepNumber(1)}
            >
              {quiz?.config.startpage.button
                ? quiz?.config.startpage.button
                : "Пройти тест"}
            </Button>
          </Box>
        </Box>
        <Box>
          <Typography
            sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}
          >
            {quiz?.config.info.phonenumber}
          </Typography>
          <Typography sx={{ fontSize: "12px" }}>
            {quiz?.config.info.law}
          </Typography>
        </Box>
      </Box>
      {!isTablet && isMediaFileExist && (
        <Box sx={{ width: "60%" }}>
          {quiz?.config.startpage.background.mobile && (
            <img
              src={quiz.config.startpage.background.mobile}
              alt=""
              style={{
                display: "block",
                width: "100%",
                height: "100%",
                objectFit: "cover",
              }}
            />
          )}
          {quiz.config.startpage.background.type === "video" &&
            quiz.config.startpage.background.video && (
              <video
                src={quiz.config.startpage.background.video}
                controls
                style={{
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                }}
              />
            )}
        </Box>
      )}
    </Box>
  );
};