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 "@utils/hooks/useQuizData";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import { setCurrentQuizStep } from "@stores/quizView";


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);
    };

    const background =
        settings.cfg.startpage.background.type === "image" ? (
            settings.cfg.startpage.background.desktop ? (
                <img
                    src={settings.cfg.startpage.background.desktop}
                    alt=""
                    style={{
                        width: "100%",
                        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"
                                : settings.cfg.startpageType === "expanded"
                                    ? "100vw"
                                    : "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={{
                height: "100%",
                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: "20px",
                                mb: "7px",
                            }}
                        >
                            {settings.cfg.startpage.logo && (
                                <img
                                    src={settings.cfg.startpage.logo}
                                    style={{
                                        height: "37px",
                                        maxWidth: "43px",
                                        objectFit: "cover",
                                    }}
                                    alt=""
                                />
                            )}
                            <Typography
                                sx={{
                                    fontSize: "14px",
                                    color: settings.cfg.startpageType === "expanded"
                                        && !isMobile ? "white" : theme.palette.text.primary
                                }}
                            >{settings.cfg.info.orgname}</Typography>
                        </Box>
                        <Link mb="16px" href={settings.cfg.info.site}>
                            <Typography
                                sx={{
                                    fontSize: "16px",
                                    color: theme.palette.primary.main,
                                    overflow: "hidden",
                                    textOverflow: "ellipsis",
                                    whiteSpace: "nowrap",
                                    maxWidth: isTablet ? "200px" : "300px"
                                }}>
                                {settings.cfg.info.site}
                            </Typography>
                        </Link>
                    </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" ? "center" : "-moz-initial",
                                    color: settings.cfg.startpageType === "expanded" && !isMobile ? "white" : theme.palette.text.primary
                                }}
                            >
                                {settings.name}
                            </Typography>
                            <Typography
                                sx={{
                                    fontSize: "16px",
                                    m: "16px 0",
                                    overflowWrap: "break-word",
                                    width: "100%",
                                    textAlign: settings.cfg.startpageType === "centered" ? "center" : "-moz-initial",
                                }}
                            >
                                {settings.cfg.startpage.description}
                            </Typography>
                            <Box width={settings.cfg.startpageType === "standard" ? "100%" : "auto"}>
                                <Button
                                    variant="contained"
                                    sx={{
                                        fontSize: "16px",
                                        padding: "10px 15px",
                                        width: settings.cfg.startpageType === "standard" ? "100%" : "auto",
                                    }}
                                    onClick={() => setCurrentQuizStep("question")}
                                >
                                    {settings.cfg.startpage.button.trim() ? settings.cfg.startpage.button : "Пройти тест"}
                                </Button>
                            </Box>
                        </Box>

                        <Box
                            sx={{
                                mt: "46px",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "space-between",
                                width: "100%",
                                flexDirection: "column"
                            }}
                        >
                            <Box sx={{ maxWidth: isTablet ? "240px" : "300px" }}>
                                {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 }}>
                                        {settings.cfg.info.phonenumber}
                                    </Typography>
                                )}
                                <Typography sx={{
                                    width: "100%",
                                    overflowWrap: "break-word",
                                    fontSize: "12px",
                                    textAlign: "end",
                                    maxHeight: "120px",
                                    overflow: "auto",
                                    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",
                    height: "100%",
                    "&::-webkit-scrollbar": { width: 0 },
                }}
            >
                <Box
                    sx={{
                        width: "100%",
                        display: "flex",
                        flexDirection: "column",
                        justifyContent: "space-between",
                        alignItems: "flex-start",
                        p: "25px",
                        height: "80%",
                        overflowY: "auto",
                        overflowX: "hidden"
                    }}
                >
                    {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: "100%",
                                "&::-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: "space-between",
                                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",
};