frontAnswerer/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";

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

export const StartPageViewPublication = ({setVisualStartPage}:Props) => {
  const theme = useTheme();
  const quiz = useCurrentQuiz();
  const { isMobileDevice } = useUADevice();

  if (!quiz) return null;

  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",
        background: quiz.config.startpageType === "expanded" ?
          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)" 
        : "",
        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" }}>
              {quiz.config.info.orgname}
            </Typography>
          </Box>
          <Link mb="16px" href={quiz.config.info.site}>
            <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.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",
            }}>{quiz.name}</Typography>
            <Typography sx={{
              fontSize: "16px",
              m: "16px 0"
            }}>
              {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"
            }}
          >
            {quiz.config.info.clickable ? (
              isMobileDevice ? (
                <Link href={`tel:${quiz.config.info.phonenumber}`}>
                  <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
                    {quiz.config.info.phonenumber}
                  </Typography>
                </Link>
              ) : (
                <ButtonBase onClick={handleCopyNumber}>
                  <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
                    {quiz.config.info.phonenumber}
                  </Typography>
                </ButtonBase>
              )
            ) : (
              <Typography sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}>
                {quiz.config.info.phonenumber}
              </Typography>
            )}
            <Typography sx={{ fontSize: "12px", textAlign: "end" }}>
              {quiz.config.info.law}
            </Typography>
          </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 isTablet = useMediaQuery(theme.breakpoints.down(630));

  switch (startpageType) {
    case null:
    case "standard": {
      return (
        <Box sx={{
          display: "flex",
          flexDirection: alignType === "left" ? "row" : "row-reverse",
          flexGrow: 1,
          height: "100vh",
          "&::-webkit-scrollbar": { width: 0 },
        }}>
          <Box sx={{
            width: !isTablet ? "40%" : "100%",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: !isTablet ? "flex-start" : "center",
            p: "25px"
          }}>
            {quizHeaderBlock}
            {quizMainBlock}
          </Box>
          <Box sx={{
            width: "60%",
            overflow: "hidden"
          }}>
            {backgroundBlock}
          </Box>
        </Box>
      );
    }
    case "expanded": {
      return (
        <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: 2,
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: alignType === "center" ? "center" : "start",
          }}>
            {quizHeaderBlock}
            {quizMainBlock}
          </Box>
          <Box sx={{
            position: "absolute",
            left: 0,
            top: 0,
            height: "100%",
            width: "100%",
            zIndex: 1,
            overflow: "hidden"
          }}>
            {backgroundBlock}
          </Box>
        </Box>
      );
    }
    case "centered": {
      return (
        <Box sx={{
          padding: "16px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          "&::-webkit-scrollbar": { width: 0 },
          overflow: "hidden"
        }}>
          {quizHeaderBlock}
          {backgroundBlock &&
            <Box>
              {backgroundBlock}
            </Box>
          }
          {quizMainBlock}
        </Box>
      );
    }
    default: notReachable(startpageType);
  }
}

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