frontPanel/src/pages/ViewPublicationPage/StartPageViewPublication.tsx

import { Box, Button, ButtonBase, Link, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe";
import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
import { notReachable } from "../../utils/notReachable";
import { useUADevice } from "../../utils/hooks/useUADevice";
import { NameplateLogo } from "@icons/NameplateLogo";
import {modes} from "../../utils/themes/Publication/themePublication";

interface Props {
  setVisualStartPage: (a: boolean) => void;
}

export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
  const theme = useTheme();
  const quiz = useCurrentQuiz();
  const mode = modes;
  const { isMobileDevice } = useUADevice();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));

  if (!quiz) return null;

  console.log(quiz);

  const handleCopyNumber = () => {
    navigator.clipboard.writeText(quiz.config.info.phonenumber);
  };

  const background =
    quiz.config.startpage.background.type === "image" ? (
      quiz.config.startpage.background.desktop ? (
        <img
          src={quiz.config.startpage.background.desktop}
          alt=""
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
            overflow: "hidden",
          }}
        />
      ) : null
    ) : quiz.config.startpage.background.type === "video" ? (
      quiz.config.startpage.background.video ? (
        <YoutubeEmbedIframe
          videoUrl={quiz.config.startpage.background.video}
          containerSX={{
            width:
              quiz.config.startpageType === "centered"
                ? "550px"
                : quiz.config.startpageType === "expanded"
                ? "100vw"
                : "100%",
            height:
              quiz.config.startpageType === "centered"
                ? "275px"
                : quiz.config.startpageType === "expanded"
                ? "100vh"
                : "100%",
            borderRadius: quiz.config.startpageType === "centered" ? "10px" : "0",
            overflow: "hidden",
            "& iframe": {
              width: "100%",
              height: "100%",
              transform:
                quiz.config.startpageType === "centered"
                  ? ""
                  : quiz.config.startpageType === "expanded"
                  ? "scale(1.5)"
                  : "scale(2.4)",
            },
          }}
        />
      ) : null
    ) : null;

  return (
    <Paper
      className="quiz-preview-draghandle"
      sx={{
        height: "100vh",
        width: "100vw",
          background:
              quiz.config.startpageType === "expanded" && !isMobile
                  ? quiz.config.startpage.position === "left"
                      ? "linear-gradient(90deg,#272626,transparent)"
                      : quiz.config.startpage.position === "center"
                          ? "linear-gradient(180deg,transparent,#272626)"
                          : "linear-gradient(270deg,#272626,transparent)"
                  : theme.palette.background.default,

        color: quiz.config.startpageType === "expanded" ? "white" : "black",
      }}
    >
      <QuizPreviewLayoutByType
        quizHeaderBlock={
          <Box p={quiz.config.startpageType === "standard" ? "" : "16px"}>
            <Box
              sx={{
                display: "flex",
                alignItems: "center",
                gap: "20px",
                mb: "7px",
              }}
            >
              {quiz.config.startpage.logo && (
                <img
                  src={quiz.config.startpage.logo}
                  style={{
                    height: "37px",
                    maxWidth: "43px",
                    objectFit: "cover",
                  }}
                  alt=""
                />
              )}
              <Typography sx={{ fontSize: "14px", color: quiz.config.startpageType === "expanded" && !isMobile ? "white" : theme.palette.text.primary}}>{quiz.config.info.orgname}</Typography>
            </Box>
            <Link mb="16px" href={quiz.config.info.site}>
              <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
                {quiz.config.info.site}
              </Typography>
            </Link>
          </Box>
        }
        quizMainBlock={
          <>
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems:
                  quiz.config.startpageType === "centered"
                    ? "center"
                    : quiz.config.startpageType === "expanded"
                    ? quiz.config.startpage.position === "center"
                      ? "center"
                      : "start"
                    : "start",
                mt: "28px",
                width: "100%",
              }}
            >
              <Typography
                sx={{
                  fontWeight: "bold",
                  fontSize: "26px",
                  fontStyle: "normal",
                  fontStretch: "normal",
                  lineHeight: "1.2",
                  overflowWrap: "break-word",
                  width: "100%",
                  textAlign: quiz.config.startpageType === "centered" ? "center" : "-moz-initial",
                  color: quiz.config.startpageType === "expanded" && !isMobile ? "white" : theme.palette.text.primary
                }}
              >
                {quiz.name}
              </Typography>
              <Typography
                sx={{
                  fontSize: "16px",
                  m: "16px 0",
                  overflowWrap: "break-word",
                  width: "100%",
                  textAlign: quiz.config.startpageType === "centered" ? "center" : "-moz-initial",
                }}
              >
                {quiz.config.startpage.description}
              </Typography>
              <Box width={quiz.config.startpageType === "standard" ? "100%" : "auto"}>
                <Button
                  variant="contained"
                  sx={{
                    fontSize: "16px",
                    padding: "10px 15px",
                    width: quiz.config.startpageType === "standard" ? "100%" : "auto",
                  }}
                  onClick={() => setVisualStartPage(true)}
                >
                  {quiz.config.startpage.button.trim() ? quiz.config.startpage.button : "Пройти тест"}
                </Button>
              </Box>
            </Box>

            <Box
              sx={{
                  mt: "46px",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  width: "100%",
                  flexDirection: isMobile ? "column" : "row"
              }}
            >
              <Box sx={{ maxWidth: "300px" }}>
                {quiz.config.info.clickable ? (
                  isMobileDevice ? (
                    <Link href={`tel:${quiz.config.info.phonenumber}`}>
                      <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
                        {quiz.config.info.phonenumber}
                      </Typography>
                    </Link>
                  ) : (
                    <ButtonBase onClick={handleCopyNumber}>
                      <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
                        {quiz.config.info.phonenumber}
                      </Typography>
                    </ButtonBase>
                  )
                ) : (
                  <Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
                    {quiz.config.info.phonenumber}
                  </Typography>
                )}
                <Typography sx={{ width: "100%", overflowWrap: "break-word", fontSize: "12px", textAlign: "end" }}>
                  {quiz.config.info.law}
                </Typography>
              </Box>

              <Box
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: "15px"
                }}
              >
                <NameplateLogo style={{ fontSize: "34px", color: quiz.config.startpageType === "expanded" && !isMobile ? "#FFFFFF" : (mode[quiz.config.theme] ? "#151515" : "#FFFFFF") }} />
                <Typography sx={{ fontSize: "20px", color: quiz.config.startpageType === "expanded" && !isMobile ? "#F5F7FF" : (mode[quiz.config.theme] ? "#4D4D4D" : "#F5F7FF"), whiteSpace: "nowrap", }}>
                  Сделано на PenaQuiz
                </Typography>
              </Box>
            </Box>
          </>
        }
        backgroundBlock={background}
        startpageType={quiz.config.startpageType}
        alignType={quiz.config.startpage.position}
      />
    </Paper>
  );
};

function QuizPreviewLayoutByType({
  quizHeaderBlock,
  quizMainBlock,
  backgroundBlock,
  startpageType,
  alignType,
}: {
  quizHeaderBlock: JSX.Element;
  quizMainBlock: JSX.Element;
  backgroundBlock: JSX.Element | null;
  startpageType: QuizStartpageType;
  alignType: QuizStartpageAlignType;
}) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  function StartPageMobile() {
      return(
          <Box
              sx={{
                  display: "flex",
                  flexDirection: "column-reverse",
                  flexGrow: 1,
                  justifyContent: "flex-end",
                  height: "100vh",
                  "&::-webkit-scrollbar": { width: 0 },
              }}
          >
              <Box
                  sx={{
                      width: "100%",
                      display: "flex",
                      flexDirection: "column",
                      justifyContent: "space-between",
                      alignItems: "flex-start",
                      p: "25px",
                      height: "80%"
                  }}
              >
                  {quizHeaderBlock}
                  <Box
                      sx={{
                          height: "80%",
                          display: "flex",
                          flexDirection: "column",
                          justifyContent: "space-between",
                          width: "100%"
                      }}
                  >
                      {quizMainBlock}
                  </Box>
              </Box>
              <Box
                  sx={{
                      width: "100%",
                      overflow: "hidden",
                  }}
              >
                  {backgroundBlock}
              </Box>
          </Box>
      )
  }



  switch (startpageType) {
    case null:
    case "standard": {
      return (
          <>
              {isMobile ? (
                  <StartPageMobile/>
              ) : (
                  <Box
                      sx={{
                          display: "flex",
                          flexDirection: alignType === "left" ? (isMobile ? "column-reverse" : "row") : "row-reverse",
                          flexGrow: 1,
                          justifyContent: isMobile ? "flex-end" : undefined,
                          height: "100vh",
                          "&::-webkit-scrollbar": { width: 0 },
                      }}
                  >
                      <Box
                          sx={{
                              width: isMobile ? "100%" : "40%",
                              display: "flex",
                              flexDirection: "column",
                              justifyContent: "space-between",
                              alignItems: "flex-start",
                              p: "25px",
                              height: isMobile ? "80%" : undefined
                          }}
                      >
                          {quizHeaderBlock}
                          {quizMainBlock}
                      </Box>

                      <Box
                          sx={{
                              width: isMobile ? "100%" : "60%",
                              overflow: "hidden",
                          }}
                      >
                          {backgroundBlock}
                      </Box>
                  </Box>
              )}

          </>

      );
    }
    case "expanded": {
      return (
          <>
              {isMobile ? (
                  <StartPageMobile/>
              ) : (
                  <Box
                      sx={{
                          position: "relative",
                          display: "flex",
                          justifyContent: startpageAlignTypeToJustifyContent[alignType],
                          flexGrow: 1,
                          height: "100%",
                          "&::-webkit-scrollbar": { width: 0 },
                      }}
                  >
                      <Box
                          sx={{
                              width: "40%",
                              position: "relative",
                              padding: "16px",
                              zIndex: 3,
                              display: "flex",
                              flexDirection: "column",
                              justifyContent: "space-between",
                              alignItems: alignType === "center" ? "center" : "start",
                          }}
                      >
                          {quizHeaderBlock}
                          {quizMainBlock}
                      </Box>
                      <Box
                          sx={{
                              position: "absolute",
                              zIndex: -1,
                              left: 0,
                              top: 0,
                              height: "100%",
                              width: "100%",
                              overflow: "hidden",
                          }}
                      >
                          {backgroundBlock}
                      </Box>
                  </Box>
              )
              }
          </>

      );
    }
    case "centered": {
      return (
          <>
              {isMobile ? (
                  <StartPageMobile/>
              ) : (
                  <Box
                      sx={{
                          padding: "16px",
                          display: "flex",
                          flexDirection: "column",
                          justifyContent: "center",
                          alignItems: "center",
                          height: "100%",
                          "&::-webkit-scrollbar": { width: 0 },
                          overflow: "hidden",
                      }}
                  >
                      {quizHeaderBlock}
                      {backgroundBlock && (
                          <Box
                              sx={{
                                  width: "60%",
                                  overflow: "hidden",
                                  display: "flex",
                                  justifyContent: "center"
                              }}
                          >
                              {backgroundBlock}
                          </Box>
                      )}
                      {quizMainBlock}
                  </Box>
              )
              }
          </>

      );
    }
    default:
      notReachable(startpageType);
  }
}

const startpageAlignTypeToJustifyContent: Record<QuizStartpageAlignType, "start" | "center" | "end"> = {
  left: "start",
  center: "center",
  right: "end",
};