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

import {Box} from "@mui/material";

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

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

import type {
    QuizStartpageAlignType,
    QuizStartpageType,
} from "@model/settingsData";
import {DESIGN_LIST} from "@/utils/designList";

type StartPageDesktopProps = {
    quizHeaderBlock: JSX.Element;
    quizMainBlock: JSX.Element;
    backgroundBlock: JSX.Element | null;
    startpageType: QuizStartpageType;
    alignType: QuizStartpageAlignType;
};

type LayoutProps = Omit<StartPageDesktopProps, "startpageType">;

const StandartLayout = ({
    alignType,
    quizHeaderBlock,
    quizMainBlock,
    backgroundBlock,
}: LayoutProps) => {
    const size = useRootContainerSize();
    const isTablet = size >= 700 && size < 1100;
    const { settings } = useQuizData();

    return (
        <Box
            id="pain"
            sx={{
                display: "flex",
                flexDirection: alignType === "left" ? "row" : "row-reverse",
                height: "100%",
                backgroundPosition: "center",
                backgroundSize: "cover",
                backgroundImage: settings.cfg.design
                    ? `url(${DESIGN_LIST[settings.cfg.theme]})`
                    : null,
                scrollbarWidth: "none",
                "&::-webkit-scrollbar": {
                    width: 0,
                },
                overflowY: "auto",
                padding: isTablet ? "15px" : "0",
            }}
        >
            <Box
                sx={{
                    width: "40%",
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-between",
                    alignItems: "flex-start",
                    p: isTablet? "25px" : alignType === 'left'? "25px 25px 25px 35px" : "25px 35px 25px 25px" ,
                    overflowY: "auto",
                    background:
                        settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
                            ? "linear-gradient(90deg,#272626,transparent)"
                            : null,
                    scrollbarWidth: "none",
                    "&::-webkit-scrollbar": {
                        width: 0,
                    },
                }}
            >
                {quizHeaderBlock}
                {quizMainBlock}
            </Box>
            {settings.cfg.startpage.background.desktop && (
                <Box sx={{ width: "60%", overflow: "hidden" }}><Box
                    sx={{
                        width: "100%",
                        height: "100%",
                        padding: alignType === "left"? "25px 25px 25px 15px" : "25px 15px 25px 25px",
                        display: "flex",
                        justifyContent: "center",
                        "& > img": { width: "100%", borderRadius: "12px" },
                    }}
                >{backgroundBlock}</Box></Box>
            )}
        </Box>
    );
};

const ExpandedLayout = ({
    alignType,
    quizHeaderBlock,
    quizMainBlock,
    backgroundBlock,
}: LayoutProps) => (
    <>
        <Box
            sx={{
                height: "100%",
                width: alignType === "center"? "100%": "42%",
                display: "flex",
                padding:
                    alignType === "center"
                        ? "30px 35px"
                        : alignType === "left"
                            ? "25px 0 31px 35px"
                            : "25px 35px 31px 0",
                margin:
                    alignType === "center"
                        ? "0 auto"
                        : alignType === "left"
                            ? "0"
                            : "0 0 0 auto",
                scrollbarWidth: "none",
                "&::-webkit-scrollbar": {
                    width: 0,
                },
                overflowY: "auto",
            }}
        >
            <Box
                sx={{
                    minHeight: "calc(100% - 32px)",
                    position: "relative",
                    width: "100%",

                    padding:
                        alignType === "center"
                            ? "0"
                            : alignType === "left"
                                ? "0 40px 0 0"
                                : "0 0 0 40px",
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-between",
                    alignItems: alignType === "center" ? "center" : "start",
                    borderRight: alignType === "left" ? "1px solid #9A9AAF80" : null,
                    borderLeft: alignType === "right" ? "1px solid #9A9AAF80" : null,
                    scrollbarWidth: "none",
                    "&::-webkit-scrollbar": {
                        width: 0,
                    },
                }}
            >
                {alignType !== "center" && quizHeaderBlock}
                {quizMainBlock}
            </Box>
        </Box>
        <Box
            sx={{
                position: "absolute",
                zIndex: -1,
                left: 0,
                top: 0,
                height: "100%",
                width: "100%",
                overflow: "hidden",
            }}
        >
            {backgroundBlock}
        </Box>
    </>
);

const CenteredLayout = ({
    quizHeaderBlock,
    quizMainBlock,
    backgroundBlock,
}: LayoutProps) => {
    const isTablet = useRootContainerSize() < 1100;
    const { settings } = useQuizData();
    return (
        <Box
            sx={{
                overflow: "auto",
                padding: "25px 25px 25px",
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                height: "100%",
                backgroundPosition: "center",
                backgroundSize: "cover",
                backgroundImage: settings.cfg.design
                    ? `url(${DESIGN_LIST[settings.cfg.theme]})`
                    : null,
                scrollbarWidth: "none",
                "&::-webkit-scrollbar": {
                    width: 0,
                },
                overflowY: "auto",
            }}
        >
            {quizHeaderBlock}
            {backgroundBlock && settings.cfg.startpage.background.desktop && (
                <Box
                    sx={{
                        width: "100%",
                        maxWidth: "844px",
                        height: isTablet ? "530px" : "306px",
                        display: "flex",
                        justifyContent: "center",
                        "& > img": { width: "100%", borderRadius: "12px" },
                    }}
                >
                    {backgroundBlock}
                </Box>
            )}
            {quizMainBlock}
        </Box>
    );
};

export const StartPageDesktop = ({
    quizHeaderBlock,
    quizMainBlock,
    backgroundBlock,
    startpageType,
    alignType,
}: StartPageDesktopProps) => {
    switch (startpageType) {
        case null:
        case "standard": {
            return (
                <StandartLayout
                    alignType={alignType}
                    quizHeaderBlock={quizHeaderBlock}
                    quizMainBlock={quizMainBlock}
                    backgroundBlock={backgroundBlock}
                />
            );
        }

        case "expanded": {
            return (
                <ExpandedLayout
                    alignType={alignType}
                    quizHeaderBlock={quizHeaderBlock}
                    quizMainBlock={quizMainBlock}
                    backgroundBlock={backgroundBlock}
                />
            );
        }

        case "centered": {
            return (
                <CenteredLayout
                    alignType={alignType}
                    quizHeaderBlock={quizHeaderBlock}
                    quizMainBlock={quizMainBlock}
                    backgroundBlock={backgroundBlock}
                />
            );
        }

        default:
            notReachable(startpageType);
    }
};