frontAnswerer/lib/components/ViewPublicationPage/StartPageViewPublication.tsx

import {
  Box,
  Button,
  ButtonBase,
  Link,
  Paper,
  Typography,
  useTheme,
} from "@mui/material";
import { useUADevice } from "../../utils/hooks/useUADevice";
import { notReachable } from "../../utils/notReachable";
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";

import { NameplateLogo } from "@icons/NameplateLogo";
import { QuizStartpageAlignType, QuizStartpageType } from "@model/settingsData";
import { useQuizData } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import { setCurrentQuizStep } from "@stores/quizView";

import PenaLogo from "@icons/PenaLogo.png";

export const StartPageViewPublication = () => {
  const theme = useTheme();
  const { settings } = useQuizData();
  const { isMobileDevice } = useUADevice();
  const isMobile = useRootContainerSize() < 650;
  const isTablet = useRootContainerSize() < 800;

  const handleCopyNumber = () => {
    navigator.clipboard.writeText(settings.cfg.info.phonenumber);
  };
  console.log(settings.cfg.startpage.background.type);

  const background =
    settings.cfg.startpage.background.type === "image" ? (
      settings.cfg.startpage.background.desktop ? (
        <img
          src={settings.cfg.startpage.background.desktop}
          alt=""
          style={{
            width:
              isMobile || settings.cfg.startpageType === "expanded"
                ? "100%"
                : undefined,
            height: "100%",
            objectFit: "cover",
            overflow: "hidden",
          }}
        />
      ) : null
    ) : 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;

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

        color: settings.cfg.startpageType === "expanded" ? "white" : "black",
      }}
    >
      <QuizPreviewLayoutByType
        quizHeaderBlock={
          <Box p={settings.cfg.startpageType === "standard" ? "" : "16px"}>
            <Box
              sx={{
                display: "flex",
                alignItems: "center",
                gap: "30px",
                mb: "7px",
              }}
            >
              <img
                src={settings.cfg.startpage.logo || PenaLogo}
                style={{
                  height: "40px",
                  maxWidth: "110px",
                  objectFit: "cover",
                }}
                alt=""
              />
              <Typography
                sx={{
                  fontSize: "14px",
                  color:
                    settings.cfg.startpageType === "expanded" && !isMobile
                      ? "white"
                      : theme.palette.text.primary,
                  wordBreak: "break-word",
                }}
              >
                {settings.cfg.info.orgname}
              </Typography>
            </Box>
          </Box>
        }
        quizMainBlock={
          <>
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems:
                  settings.cfg.startpageType === "centered"
                    ? "center"
                    : settings.cfg.startpageType === "expanded"
                    ? settings.cfg.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:
                    settings.cfg.startpageType === "centered" ||
                    settings.cfg.startpage.position === "center"
                      ? "center"
                      : "-moz-initial",
                  color:
                    settings.cfg.startpageType === "expanded" && !isMobile
                      ? "white"
                      : theme.palette.text.primary,
                }}
              >
                {settings.name}
              </Typography>
              <Typography
                sx={{
                  fontSize: "16px",
                  margin: "16px 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" && !isMobile
                      ? "white"
                      : theme.palette.text.primary,
                }}
              >
                {settings.cfg.startpage.description}
              </Typography>
              <Box
                width={
                  settings.cfg.startpageType === "standard" ? "100%" : "auto"
                }
              >
                <Button
                  variant="contained"
                  sx={{
                    fontSize: "18px",
                    padding: "10px 30px",
                    width: "auto",
                    background: "#7E2AEA",
                  }}
                  onClick={() => setCurrentQuizStep("question")}
                >
                  {settings.cfg.startpage.button.trim()
                    ? settings.cfg.startpage.button
                    : "Пройти тест"}
                </Button>
              </Box>
            </Box>

            <Box
              sx={{
                mt: "46px",
                display: "flex",
                gap: "20px",
                alignItems: "flex-end",
                justifyContent: "space-between",
                width: "100%",
                flexWrap: "wrap",
              }}
            >
              <Box
                sx={{
                  maxWidth: isTablet ? "240px" : "300px",
                  marginBottom: "10px",
                }}
              >
                {settings.cfg.info.site && (
                  <Link mb="16px" href={settings.cfg.info.site}>
                    <Typography
                      sx={{
                        fontSize: "16px",
                        color: "#7E2AEA",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                        maxWidth: isTablet ? "200px" : "300px",
                      }}
                    >
                      {settings.cfg.info.site}
                    </Typography>
                  </Link>
                )}
                {settings.cfg.info.clickable ? (
                  isMobileDevice ? (
                    <Link href={`tel:${settings.cfg.info.phonenumber}`}>
                      <Typography
                        sx={{
                          fontSize: "16px",
                          color: theme.palette.primary.main,
                        }}
                      >
                        {settings.cfg.info.phonenumber}
                      </Typography>
                    </Link>
                  ) : (
                    <ButtonBase onClick={handleCopyNumber}>
                      <Typography
                        sx={{
                          fontSize: "16px",
                          color: theme.palette.primary.main,
                        }}
                      >
                        {settings.cfg.info.phonenumber}
                      </Typography>
                    </ButtonBase>
                  )
                ) : (
                  <Typography
                    sx={{
                      fontSize: "16px",
                      color: theme.palette.primary.main,
                      marginTop: "5px",
                    }}
                  >
                    {settings.cfg.info.phonenumber}
                  </Typography>
                )}
                <Typography
                  sx={{
                    width: "100%",
                    overflowWrap: "break-word",
                    fontSize: "12px",
                    maxHeight: "120px",
                    overflow: "auto",
                    marginTop: "5px",
                    "&::-webkit-scrollbar": { width: 0 },
                    color:
                      settings.cfg.startpageType === "expanded" && !isMobile
                        ? "white"
                        : theme.palette.text.primary,
                  }}
                >
                  {settings.cfg.info.law}
                </Typography>
              </Box>

              <Box
                component={Link}
                target={"_blank"}
                href={"https://quiz.pena.digital"}
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: "15px",
                  textDecoration: "none",
                }}
              >
                <NameplateLogo
                  style={{
                    fontSize: "34px",
                    color:
                      settings.cfg.startpageType === "expanded" && !isMobile
                        ? "#FFFFFF"
                        : quizThemes[settings.cfg.theme].isLight
                        ? "#151515"
                        : "#FFFFFF",
                  }}
                />
                <Typography
                  sx={{
                    fontSize: "20px",
                    color:
                      settings.cfg.startpageType === "expanded" && !isMobile
                        ? "#F5F7FF"
                        : quizThemes[settings.cfg.theme].isLight
                        ? "#4D4D4D"
                        : "#F5F7FF",
                    whiteSpace: "nowrap",
                  }}
                >
                  Сделано на PenaQuiz
                </Typography>
              </Box>
            </Box>
          </>
        }
        backgroundBlock={background}
        startpageType={settings.cfg.startpageType}
        alignType={settings.cfg.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 isMobile = useRootContainerSize() < 650;

  function StartPageMobile() {
    return (
      <Box
        sx={{
          display: "flex",
          flexDirection: "column-reverse",
          flexGrow: 1,
          justifyContent: "flex-end",
          minHeight: "100vh",
          height: "100%",
          "&::-webkit-scrollbar": { width: 0 },
        }}
      >
        <Box
          sx={{
            width: "100%",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "flex-start",
            p: "25px",
            height: "100%",
            overflowY: "auto",
            overflowX: "hidden",
            "&::-webkit-scrollbar": {
              width: "4px",
            },
            "&::-webkit-scrollbar-thumb": {
              backgroundColor: "#b8babf",
            },
          }}
        >
          {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
              id="pain"
              sx={{
                display: "flex",
                flexDirection:
                  alignType === "left"
                    ? isMobile
                      ? "column-reverse"
                      : "row"
                    : "row-reverse",
                flexGrow: 1,
                justifyContent: isMobile ? "flex-end" : undefined,
                height: "100%",
                minHeight: "100vh",
                "&::-webkit-scrollbar": { width: 0 },
                overflow: "auto",
              }}
            >
              <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={{
                overflow: "auto",
                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={{
                overflow: "auto",
                padding: "16px",
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "center",
                height: "100%",
                "&::-webkit-scrollbar": { width: 0 },
              }}
            >
              {quizHeaderBlock}
              {backgroundBlock && (
                <Box
                  sx={{
                    width: "60%",
                    height: "275px",
                    // 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",
};