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

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

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

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

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

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

type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">;

const StandartMobileLayout = ({
                                  quizHeaderBlock,
                                  quizMainBlock,
                                  backgroundBlock,
                              }: MobileLayoutProps) => {
    const {settings} = useQuizData();

    return (
        <Box
            sx={{
                display: "flex",
                flexDirection: "column",
                flexGrow: 1,
                justifyContent: "flex-end",
                minHeight: "100%",
                height: "100%",
                "&::-webkit-scrollbar": {width: 0},
                backgroundPosition: "center",
                backgroundSize: "cover",
                backgroundImage: settings.cfg.design
                    ? `url(${DESIGN_LIST[settings.cfg.theme]})`
                    : null,
            }}
        >
            <Box
                sx={{
                    width: "100%",
                    display: "flex",
                    flexGrow: 1,
                    flexDirection: "column",
                    justifyContent: "space-between",
                    alignItems: "flex-start",
                    p: "20px",
                    height: "100%",
                    overflowY: "auto",
                    overflowX: "hidden",
                    background:
                        settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
                            ? "linear-gradient(90deg,#272626,transparent)"
                            : null,
                    "&::-webkit-scrollbar": {
                        width: "4px",
                    },
                    "&::-webkit-scrollbar-thumb": {
                        backgroundColor: "#b8babf",
                    },
                }}
            >
                <Box sx={{marginBottom: "13px"}}>
                    {quizHeaderBlock}
                </Box>
                {settings.cfg.startpage.background.desktop && (
                    <Box sx={{width: "100%", overflow: "hidden"}}>
                        <Box
                            sx={{
                                width: "100%",
                                height: "100%",
                                display: "flex",
                                justifyContent: "center",
                                "& > img": {
                                    width: "100%",
                                    borderRadius: "12px"
                                },
                            }}
                        >
                            {backgroundBlock}
                        </Box>
                    </Box>
                )}
                <Box
                    sx={{
                        height: "80%",
                        display: "flex",
                        flexGrow: 1,
                        flexDirection: "column",
                        justifyContent: "space-between",
                        width: "100%",
                        marginTop: "30px"
                    }}
                >
                    {quizMainBlock}
                </Box>
            </Box>
        </Box>
    );
};

const ExpandedMobileLayout = ({
                                  quizHeaderBlock,
                                  quizMainBlock,
                                  backgroundBlock,
                              }: MobileLayoutProps) => (
    <Box
        sx={{
            display: "flex",
            flexDirection: "column-reverse",
            flexGrow: 1,
            justifyContent: "flex-end",
            minHeight: "100%",
            height: "100%",
            "&::-webkit-scrollbar": {width: 0},
        }}
    >
        <Box
            sx={{
                zIndex: 3,
                width: "100%",
                display: "flex",
                flexGrow: 1,
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "flex-start",
                height: "100%",
                overflowY: "auto",
                overflowX: "hidden",
                "&::-webkit-scrollbar": {width: "4px"},
                "&::-webkit-scrollbar-thumb": {backgroundColor: "#b8babf"},
            }}
        >
            <Box
                sx={{
                    padding: "20px",
                    height: "80%",
                    display: "flex",
                    flexGrow: 1,
                    flexDirection: "column",
                    justifyContent: "space-between",
                    width: "100%",
                }}
            >
                {quizHeaderBlock}
                {quizMainBlock}
            </Box>
        </Box>
        <Box
            sx={{
                zIndex: -1,
                position: "absolute",
                left: 0,
                top: 0,
                width: "100%",
                height: "100%",
                // minHeight: "100%",
                overflow: "hidden",
                "& > img": {
                    display: "block",
                    minHeight: "100%",
                },
            }}
        >
            {backgroundBlock}
        </Box>
    </Box>
);

const CenteredMobileLayout = ({
                                  quizHeaderBlock,
                                  quizMainBlock,
                                  backgroundBlock,
                              }: MobileLayoutProps) => {
    const {settings} = useQuizData();
    return (
        <Box
            sx={{
                display: "flex",
                flexDirection: "column-reverse",
                flexGrow: 1,
                justifyContent: "flex-end",
                minHeight: "100%",
                height: "100%",
                backgroundPosition: "center",
                backgroundSize: "cover",
                backgroundImage: !settings.cfg.design ? null : settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
                    ? `linear-gradient(0deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})` : `url(${DESIGN_LIST[settings.cfg.theme]})`,
                "&::-webkit-scrollbar": {width: 0},
            }}
        >
            <Box
                sx={{
                    width: "100%",
                    display: "flex",
                    flexGrow: 1,
                    flexDirection: "column",
                    justifyContent: "space-between",
                    alignItems: "flex-start",
                    padding: "20px",
                    height: "100%",
                    overflowY: "auto",
                    overflowX: "hidden",
                    "&::-webkit-scrollbar": {width: "4px"},
                    "&::-webkit-scrollbar-thumb": {backgroundColor: "#b8babf"},
                }}
            >
                {quizHeaderBlock}
                {settings.cfg.startpage.background.desktop && (
                    <Box
                        sx={{
                            width: "100%",
                            overflow: "hidden",
                            "& > img": {width: "100%", borderRadius: "12px"},
                        }}
                    >
                        {backgroundBlock}
                    </Box>
                )}
                <Box
                    sx={{
                        height: "80%",
                        display: "flex",
                        flexGrow: 1,
                        flexDirection: "column",
                        justifyContent: "space-between",
                        width: "100%",
                    }}
                >
                    {quizMainBlock}
                </Box>
            </Box>
        </Box>
    );
}

export const StartPageMobile = ({
                                    quizHeaderBlock,
                                    quizMainBlock,
                                    backgroundBlock,
                                    startpageType,
                                }: StartPageMobileProps) => {
    switch (startpageType) {
        case null:
        case "standard": {
            return (
                <StandartMobileLayout
                    quizHeaderBlock={quizHeaderBlock}
                    quizMainBlock={quizMainBlock}
                    backgroundBlock={backgroundBlock}
                />
            );
        }

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

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

        default:
            notReachable(startpageType);
    }
};