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

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

import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizStore } from "@/stores/useQuizStore";

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 } = useQuizStore();

  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",
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: alignType === "left" ? "row" : "row-reverse",
          padding: isTablet ? "15px" : "0",
          width: "100%",
          background:
            settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
              ? alignType === "left"
                ? "linear-gradient(90deg, #272626, transparent)"
                : alignType === "right"
                  ? "linear-gradient(-90deg, #272626, transparent)"
                  : "linear-gradient(0deg, #272626, transparent)"
              : null,
        }}
      >
        <Box
          sx={{
            width: settings.cfg.startpage.background.desktop ? "40%" : undefined,
            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",
            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" },
              }}
              onClick={(event) => event.preventDefault()}
            >
              {backgroundBlock}
            </Box>
          </Box>
        )}
      </Box>
    </Box>
  );
};

const ExpandedLayout = ({ alignType, quizHeaderBlock, quizMainBlock, backgroundBlock }: LayoutProps) => {
  const size = useRootContainerSize();
  const isTablet = size >= 700 && size < 1100;
  return (
    <>
      <Box
        sx={{
          height: "100%",
          width: alignType === "center" ? "100%" : isTablet ? "46%" : "42%",
          display: "flex",
          padding:
            alignType === "center"
              ? isTablet
                ? "30px 40px"
                : "30px 35px"
              : alignType === "left"
                ? isTablet
                  ? "25px 0 31px 40px"
                  : "25px 0 31px 35px"
                : isTablet
                  ? "25px 40px 31px 0"
                  : "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 } = useQuizStore();
  return (
    <Box
      sx={{
        overflow: "auto",
        padding: isTablet ? "25px 40px 40px" : "25px 25px 25px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        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]})`,
        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" },
          }}
          onClick={(event) => event.preventDefault()}
        >
          {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);
  }
};