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 { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";

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

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-reverse",
        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: "25px",
          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",
          },
        }}
      >
        {quizHeaderBlock}
        <Box
          sx={{
            height: "80%",
            display: "flex",
            flexGrow: 1,
            flexDirection: "column",
            justifyContent: "space-between",
            width: "100%",
          }}
        >
          {quizMainBlock}
        </Box>
      </Box>
      {settings.cfg.startpage.background.desktop && (
        <Box sx={{ width: "100%", overflow: "hidden" }}>{backgroundBlock}</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" },
      }}
    >
      {quizHeaderBlock}
      <Box
        sx={{
          padding: "16px",
          height: "80%",
          display: "flex",
          flexGrow: 1,
          flexDirection: "column",
          justifyContent: "space-between",
          width: "100%",
        }}
      >
        {quizMainBlock}
      </Box>
    </Box>
    <Box
      sx={{
        zIndex: -1,
        position: "absolute",
        left: 0,
        top: 0,
        width: "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
                    ? `url(${DESIGN_LIST[settings.cfg.theme]})`
                    : null,
                "&::-webkit-scrollbar": {width: 0},
            }}
        >
            <Box
                sx={{
                    width: "100%",
                    display: "flex",
                    flexGrow: 1,
                    flexDirection: "column",
                    justifyContent: "space-between",
                    alignItems: "flex-start",
                    padding: "10px 25px 25px",
                    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);
  }
};