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

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

import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType";
import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";

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

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;
    console.log(settings)
    const handleCopyNumber = () => {
        navigator.clipboard.writeText(settings.cfg.info.phonenumber);
        //@ts-ignore
        let YM = window?.ym;
        //@ts-ignore
        let VP = window?._tmr;
        if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
            YM(
                settings.cfg.yandexMetricNumber,
                "reachGoal",
                "penaquiz-phone"
            );
        };
        if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
            VP.push({
                type: "reachGoal",
                id: settings.cfg.vkMetricNumber,
                goal: "penaquiz-phone"
            });
        };
    };

    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;

    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,
                                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={() => {
                                        setCurrentQuizStep("question")


                                        //@ts-ignore
                                        let YM = window?.ym;
                                        //@ts-ignore
                                        let VP = window?._tmr;
                                        if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
                                            YM(
                                                settings.cfg.yandexMetricNumber,
                                                "reachGoal",
                                                "penaquiz-startquiz"
                                            );
                                        };
                                        if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
                                            VP.push({
                                                type: "reachGoal",
                                                id: settings.cfg.vkMetricNumber,
                                                goal: "penaquiz-startquiz"
                                            });
                                        };
                                    }}
                                >
                                    {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={async () => {
                                            //@ts-ignore
                                            let YM = window?.ym;
                                            //@ts-ignore
                                            let VP = window?._tmr;
                                            if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
                                                await YM(
                                                    settings.cfg.yandexMetricNumber,
                                                    "reachGoal",
                                                    "penaquiz-email"
                                                );
                                            };
                                            if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
                                                await VP.push({
                                                    type: "reachGoal",
                                                    id: settings.cfg.vkMetricNumber,
                                                    goal: "penaquiz-email"
                                                });
                                            };
                                            location.href = (
                                                settings.cfg.info.site.includes("https")
                                                    ? settings.cfg.info.site
                                                    : `https://${settings.cfg.info.site}`
                                            ).replace(/\s+/g, '')
                                        }}
                                    >
                                        <Typography
                                            sx={{
                                                lineHeight: "19px",
                                                fontSize: "16px",
                                                textAlign: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile ? "end" : "none",
                                                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}>
                                            <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" ? "end" : "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>
    );
};