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

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

import { notReachable } from "@utils/notReachable";

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) => (
  <Box
    sx={{
      display: "flex",
      flexDirection: "column-reverse",
      flexGrow: 1,
      justifyContent: "flex-end",
      minHeight: "100vh",
      height: "100%",
      "&::-webkit-scrollbar": { width: 0 },
    }}
  >
    <Box
      sx={{
        width: "100%",
        display: "flex",
        flexGrow: 1,
        flexDirection: "column",
        justifyContent: "space-between",
        alignItems: "flex-start",
        p: "25px",
        height: "100%",
        overflowY: "auto",
        overflowX: "hidden",
        "&::-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>
    <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: "100vh",
      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: "100vh",
        overflow: "hidden",
        "& > img": {
          display: "block",
          minHeight: "100vh",
        },
      }}
    >
      {backgroundBlock}
    </Box>
  </Box>
);

const CenteredMobileLayout = ({
  quizHeaderBlock,
  quizMainBlock,
  backgroundBlock,
}: MobileLayoutProps) => (
  <Box
    sx={{
      display: "flex",
      flexDirection: "column-reverse",
      flexGrow: 1,
      justifyContent: "flex-end",
      minHeight: "100vh",
      height: "100%",
      "&::-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}
      <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);
  }
};