frontAnswerer/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx

import {
  Box,
  Button,
  ButtonBase,
  Link,
  Paper,
  Typography,
  useTheme,
} from "@mui/material";

import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType";

import { useQuizData } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";

import { useUADevice } from "@utils/hooks/useUADevice";
import { quizThemes } from "@utils/themes/Publication/themePublication";

import { NameplateLogo } from "@icons/NameplateLogo";
import { useQuizViewStore } from "@/stores/quizView";
import { DESIGN_LIST } from "@/utils/designList";

import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";

import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";

export const StartPageViewPublication = () => {
  const theme = useTheme();
  const { settings, show_badge, quizId, questions } = useQuizData();
  const { isMobileDevice } = useUADevice();
  const setCurrentQuizStep = useQuizViewStore(
    (state) => state.setCurrentQuizStep
  );

  const size = useRootContainerSize();
  const isMobile = size < 700;
  const isTablet = size >= 700 && size < 1100;

  const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
  const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);

  const handleCopyNumber = () => {
    navigator.clipboard.writeText(settings.cfg.info.phonenumber);

    vkMetrics.phoneNumberOpened();
    yandexMetrics.phoneNumberOpened();
  };

  const background =
    settings.cfg.startpage.background.type === "image" ? (
      <img
        src={
          settings.cfg.startpage.background.desktop ||
          DESIGN_LIST[settings.cfg.theme] ||
          ""
        }
        alt=""
        style={{
          display: "block",
          width:
            isMobile || settings.cfg.startpageType === "expanded"
              ? "100%"
              : undefined,
          height: "100%",
          minWidth: "100%",
          maxHeight: "100%",
          objectFit: "cover",
          overflow: "hidden",
        }}
      />
    ) : settings.cfg.startpage.background.type === "video" ? (
      settings.cfg.startpage.background.video ? (
        <YoutubeEmbedIframe
          videoUrl={settings.cfg.startpage.background.video}
          containerSX={{
            width: settings.cfg.startpageType === "centered" ? "550px" : "100%",
            height:
              settings.cfg.startpageType === "centered" ? "275px" : "100%",
            borderRadius:
              settings.cfg.startpageType === "centered" ? "10px" : "0",
            overflow: "hidden",
            "& iframe": {
              width: "100%",
              height: "100%",
              transform:
                settings.cfg.startpageType === "centered"
                  ? ""
                  : settings.cfg.startpageType === "expanded"
                    ? "scale(1.5)"
                    : "scale(2.4)",
            },
          }}
        />
      ) : null
    ) : null;

  const quizHeaderBlock = (
    <Box
      sx={{
        margin: settings.cfg.startpageType === "centered" ? "0 auto" : null,
      }}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          flexWrap:
            settings.cfg.startpageType === "expanded" &&
              settings.cfg.startpage.position === "center"
              ? "nowrap"
              : "wrap",
          gap: isMobile ? "20px" : "30px",
          mb:
            settings.cfg.startpageType === "centered"
              ? isMobile
                ? "20px"
                : "25px"
              : settings.cfg.startpageType === "expanded" &&
                settings.cfg.startpage.position === "center" &&
                !isMobile
                ? 0
                : "7px",
          justifyContent:
            settings.cfg.startpageType === "expanded" &&
              settings.cfg.startpage.position === "center" &&
              isMobile
              ? "center"
              : undefined,
        }}
      >
        {settings.cfg.startpage.logo && (
          <img
            src={settings.cfg.startpage.logo}
            style={{
              maxHeight: isMobile ? "30px" : "40px",
              maxWidth: isMobile ? "100px" : "110px",
              objectFit: "cover",
            }}
            alt=""
          />
        )}
        <Typography
          sx={{
            fontSize: "12px",
            color:
              settings.cfg.startpageType === "expanded"
                ? "white"
                : theme.palette.text.primary,
            wordBreak:
              settings.cfg.startpageType === "expanded" &&
                settings.cfg.startpage.position === "center"
                ? "normal"
                : "break-word",
          }}
        >
          {settings.cfg.info.orgname}
        </Typography>
      </Box>
    </Box>
  );

  const PenaBadge = (
    <Box
      component={Link}
      target={"_blank"}
      href={`https://${window.location.hostname.includes("s") ? "s" : ""
        }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
      sx={{
        display: "flex",
        alignItems: "center",
        gap: "7px",
        textDecoration: "none",
        marginLeft:
          settings.cfg.startpageType === "expanded" &&
            settings.cfg.startpage.position === "center" &&
            !isTablet &&
            !isMobile
            ? "61px"
            : undefined,
      }}
    >
      <NameplateLogo
        style={{
          fontSize: "23px",
          color:
            settings.cfg.startpageType === "expanded"
              ? "#FFFFFF"
              : quizThemes[settings.cfg.theme].isLight
                ? "#151515"
                : "#FFFFFF",
        }}
      />
      {/*<Typography*/}
      {/*    sx={{*/}
      {/*        fontSize: "13px",*/}
      {/*        color:*/}
      {/*            settings.cfg.startpageType === "expanded"*/}
      {/*                ? "#F5F7FF"*/}
      {/*                : quizThemes[settings.cfg.theme].isLight*/}
      {/*                    ? "#4D4D4D"*/}
      {/*                    : "#F5F7FF",*/}
      {/*        whiteSpace: "nowrap",*/}
      {/*    }}*/}
      {/*>*/}
      {/*    Сделано на PenaQuiz*/}
      {/*</Typography>*/}
    </Box>
  );

  const realQuestionsCount = questions.filter(
    (question) => question.type !== null && question.type !== "result"
  ).length;

  const onQuizStart = () => {
    setCurrentQuizStep("question");

    vkMetrics.firstPageOpened();
    yandexMetrics.firstPageOpened();
  };

  const onSiteClick = () => {
    vkMetrics.emailOpened();
    yandexMetrics.emailOpened();


    setTimeout(() => {
      location.href = (
        settings.cfg.info.site.includes("https")
          ? settings.cfg.info.site
          : `https://${settings.cfg.info.site}`
      ).replace(/\s+/g, "");
    }, 1000)
  };

  return (
    <Paper
      className="settings-preview-draghandle"
      sx={{
        borderRadius: 0,
        height: "100%",
        width: "100%",
        background:
          settings.cfg.startpageType === "expanded"
            ? settings.cfg.startpage.position === "left" ||
              (isMobile && settings.cfg.startpage.position === "right")
              ? "linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)"
              : settings.cfg.startpage.position === "center"
                ? "linear-gradient(0deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)"
                : "linear-gradient(-90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)"
            : theme.palette.background.default,

        color: settings.cfg.startpageType === "expanded" ? "white" : "black",
      }}
    >
      <QuizPreviewLayoutByType
        quizHeaderBlock={quizHeaderBlock}
        quizMainBlock={
          <>
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                justifyContent:
                  settings.cfg.startpageType === "standard" && isMobile
                    ? "start"
                    : "center",
                flexGrow: settings.cfg.startpageType === "centered" ? 0 : 1,
                wordBreak: "break-word",
                alignItems:
                  settings.cfg.startpageType === "centered"
                    ? "center"
                    : settings.cfg.startpageType === "expanded"
                      ? settings.cfg.startpage.position === "center"
                        ? "center"
                        : "start"
                      : "start",
                marginTop:
                  settings.cfg.startpageType === "centered"
                    ? "30px"
                    : isMobile
                      ? "0px"
                      : "5px",
                maxWidth: isMobile
                  ? "100%"
                  : settings.cfg.startpageType === "centered"
                    ? "700px"
                    : isTablet &&
                      settings.cfg.startpageType !== "expanded" &&
                      settings.cfg.startpage.position !== "center"
                      ? "380px"
                      : "531px",
              }}
            >
              <Typography
                sx={{
                  fontWeight: "700",
                  fontSize: isMobile ? "24px" : "27px",
                  fontStyle: "normal",
                  fontStretch: "normal",
                  lineHeight: isMobile ? "26.4px" : "normal",
                  overflowWrap: "break-word",
                  width: "100%",
                  textAlign:
                    settings.cfg.startpageType === "centered" ||
                      settings.cfg.startpage.position === "center"
                      ? "center"
                      : "-moz-initial",
                  color:
                    settings.cfg.startpageType === "expanded"
                      ? "white"
                      : theme.palette.text.primary,
                }}
              >
                {settings.name}
              </Typography>
              <Typography
                sx={{
                  fontSize: isMobile ? "16px" : "17px",
                  fontWeight: "400",
                  lineHeight: isMobile ? "19.2px" : "normal",
                  margin: "12px 0 30px",
                  overflowWrap: "break-word",
                  width: "100%",
                  textAlign:
                    settings.cfg.startpageType === "centered" ||
                      settings.cfg.startpage.position === "center"
                      ? "center"
                      : "-moz-initial",
                  color:
                    settings.cfg.startpageType === "expanded"
                      ? "white"
                      : theme.palette.text.primary,
                }}
              >
                {settings.cfg.startpage.description}
              </Typography>
              <Box
                width={
                  settings.cfg.startpageType === "standard" ? "100%" : "auto"
                }
              >
                <Button
                  variant="contained"
                  disabled={realQuestionsCount === 0}
                  sx={{
                    fontSize: "18px",
                    padding: "10px 20px",
                    width: "auto",
                    background: theme.palette.primary.main,
                    borderRadius: "12px",
                  }}
                  onClick={onQuizStart}
                >
                  {settings.cfg.startpage.button.trim()
                    ? settings.cfg.startpage.button
                    : "Пройти тест"}
                </Button>
              </Box>
            </Box>
            <Box
              sx={{
                display: "flex",
                flexGrow:
                  settings.cfg.startpageType === "centered"
                    ? isMobile
                      ? 0
                      : 1
                    : 0,
                gap: isMobile ? "30px" : "40px",
                alignItems: "flex-end",
                justifyContent:
                  (settings.cfg.startpageType === "expanded" &&
                    settings.cfg.startpage.position === "center" &&
                    isMobile) ||
                    (settings.cfg.startpageType === "centered" && isMobile)
                    ? "center"
                    : "space-between",
                width: "100%",
                flexWrap:
                  settings.cfg.startpageType === "expanded" &&
                    settings.cfg.startpage.position === "center"
                    ? isMobile
                      ? "wrap-reverse"
                      : "nowrap"
                    : "wrap",
              }}
            >
              {settings.cfg.startpageType === "expanded" &&
                settings.cfg.startpage.position === "center" &&
                !isMobile &&
                quizHeaderBlock}
              <Box
                sx={{
                  maxWidth: "300px",
                  display:
                    (settings.cfg.startpageType === "centered" && isMobile) ||
                      (settings.cfg.startpageType === "expanded" &&
                        settings.cfg.startpage.position === "center" &&
                        isMobile)
                      ? "flex"
                      : "block",
                  flexDirection: "column",
                  alignItems: "center",
                  order:
                    settings.cfg.startpageType === "expanded" &&
                      settings.cfg.startpage.position === "center"
                      ? "2"
                      : "0",
                }}
              >
                {settings.cfg.info.site && (
                  <ButtonBase
                    onClick={onSiteClick}
                    sx={{
                      display: "block",
                      width: "100%",
                      marginTop: "10px",
                      marginLeft:
                        settings.cfg.startpageType === "expanded" &&
                          settings.cfg.startpage.position === "center" &&
                          !isMobile
                          ? "auto"
                          : undefined,
                    }}
                  >
                    <Typography
                      sx={{
                        lineHeight: "19px",
                        fontSize: "16px",
                        textAlign:
                          settings.cfg.startpageType === "expanded" &&
                            settings.cfg.startpage.position === "center" &&
                            !isMobile
                            ? "end" : settings.cfg.startpageType === "expanded" &&
                              settings.cfg.startpage.position === "center" &&
                              isMobile || settings.cfg.startpageType === "centered" &&
                              isMobile ? "center"
                              : "start",
                        color: theme.palette.primary.main,
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                      }}
                    >
                      {settings.cfg.info.site}
                    </Typography>
                  </ButtonBase>
                )}
                {settings.cfg.info.clickable ? (
                  isMobileDevice ? (
                    <Link href={`tel:${settings.cfg.info.phonenumber}`}>
                      <Typography
                        sx={{
                          lineHeight: "19px",
                          textAlign:
                            settings.cfg.startpageType === "expanded" &&
                              settings.cfg.startpage.position === "center"
                              ? "end"
                              : "none",
                          fontSize: "16px",
                          color:
                            settings.cfg.startpageType === "expanded"
                              ? "#FFFFFF"
                              : theme.palette.text.primary,
                        }}
                      >
                        {settings.cfg.info.phonenumber}
                      </Typography>
                    </Link>
                  ) : (
                    <ButtonBase
                      onClick={handleCopyNumber}
                      sx={{
                        display: "block",
                        marginTop: "10px",
                        marginLeft:
                          settings.cfg.startpageType === "expanded" &&
                            settings.cfg.startpage.position === "center" &&
                            !isMobile
                            ? "auto"
                            : undefined,
                      }}
                    >
                      <Typography
                        sx={{
                          textAlign:
                            settings.cfg.startpageType === "expanded" &&
                              settings.cfg.startpage.position === "center"
                              ? "end"
                              : "none",
                          fontSize: "16px",
                          lineHeight: "19px",
                          color:
                            settings.cfg.startpageType === "expanded"
                              ? "#FFFFFF"
                              : theme.palette.text.primary,
                        }}
                      >
                        {settings.cfg.info.phonenumber}
                      </Typography>
                    </ButtonBase>
                  )
                ) : (
                  <Typography
                    sx={{
                      lineHeight: "19px",
                      textAlign:
                        settings.cfg.startpageType === "expanded" &&
                          settings.cfg.startpage.position === "center"
                          ? "end"
                          : "none",
                      fontSize: "16px",
                      marginTop: "10px",
                      color:
                        settings.cfg.startpageType === "expanded"
                          ? "#FFFFFF"
                          : theme.palette.text.primary,
                    }}
                  >
                    {settings.cfg.info.phonenumber}
                  </Typography>
                )}

                <Typography
                  sx={{
                    lineHeight: "14px",
                    width: "100%",
                    overflowWrap: "break-word",
                    fontSize: "12px",
                    textAlign:
                      settings.cfg.startpageType === "expanded" &&
                        settings.cfg.startpage.position === "center" &&
                        !isMobile
                        ? "end"
                        : (settings.cfg.startpageType === "expanded" &&
                          settings.cfg.startpage.position === "center" &&
                          isMobile) ||
                          (settings.cfg.startpageType === "centered" &&
                            isMobile)
                          ? "center"
                          : "none",
                    maxHeight: "120px",
                    overflow: "auto",
                    marginTop: "10px",
                    "&::-webkit-scrollbar": { width: 0 },
                    color:
                      settings.cfg.startpageType === "expanded"
                        ? "white"
                        : theme.palette.text.primary,
                  }}
                >
                  {settings.cfg.info.law}
                </Typography>
              </Box>

              {show_badge && PenaBadge}
            </Box>
          </>
        }
        backgroundBlock={background}
        startpageType={settings.cfg.startpageType}
        alignType={settings.cfg.startpage.position}
      />
    </Paper>
  );
};