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

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

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 { settings } = useQuizData();

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

const ExpandedLayout = ({
  alignType,
  quizHeaderBlock,
  quizMainBlock,
  backgroundBlock,
}: LayoutProps) => (
  <Box>
    <Box
      sx={{
        zIndex: 3,
        minHeight: "100%",
        width: "40%",
        padding: "16px",
        margin:
          alignType === "center"
            ? "0 auto"
            : alignType === "left"
            ? "0"
            : "0 0 0 auto",
      }}
    >
      <Box
        sx={{
          padding: "16px",
          minHeight: "calc(100vh - 32px)",
          position: "relative",
          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,
        }}
      >
        {quizHeaderBlock}
        {quizMainBlock}
      </Box>
    </Box>
    <Box
      sx={{
        position: "absolute",
        zIndex: -1,
        left: 0,
        top: 0,
        height: "100%",
        width: "100%",
        overflow: "hidden",
      }}
    >
      {backgroundBlock}
    </Box>
  </Box>
);

const CenteredLayout = ({
  quizHeaderBlock,
  quizMainBlock,
  backgroundBlock,
}: LayoutProps) => {
  const isTablet = useRootContainerSize() < 1100;
    const { settings } = useQuizData();
  return (
    <Box
      sx={{
        overflow: "auto",
        padding: "10px 25px 25px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        minHeight: "100%",
        backgroundPosition: "center",
        backgroundSize: "cover",
        backgroundImage: settings.cfg.design
            ? `url(${DESIGN_LIST[settings.cfg.theme]})`
            : null,
        "&::-webkit-scrollbar": { width: 0 },
      }}
    >
      {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);
  }
};