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

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

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

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) => (
  <Box
    id="pain"
    sx={{
      display: "flex",
      flexDirection: alignType === "left" ? "row" : "row-reverse",
      flexGrow: 1,
      minHeight: "100vh",
      "&::-webkit-scrollbar": { width: 0 },
      overflow: "auto",
    }}
  >
    <Box
      sx={{
        width: "40%",
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        alignItems: "flex-start",
        p: "25px",
      }}
    >
      {quizHeaderBlock}
      {quizMainBlock}
    </Box>

    <Box sx={{ width: "60%", overflow: "hidden" }}>{backgroundBlock}</Box>
  </Box>
);

const ExpandedLayout = ({
  alignType,
  quizHeaderBlock,
  quizMainBlock,
  backgroundBlock,
}: LayoutProps) => (
  <Box>
    <Box
      sx={{
        minHeight: "100vh",
        width: "40%",
        padding: "16px",
        zIndex: 3,
      }}
    >
      <Box
        sx={{
          padding: "16px",
          minHeight: "calc(100vh - 32px)",
          position: "relative",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          alignItems: alignType === "center" ? "center" : "start",
          borderRight: "1px solid #9A9AAF80",
        }}
      >
        {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;

  return (
    <Box
      sx={{
        overflow: "auto",
        padding: "10px 25px 25px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        minHeight: "100vh",
        "&::-webkit-scrollbar": { width: 0 },
      }}
    >
      {quizHeaderBlock}
      {backgroundBlock && (
        <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);
  }
};