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

import { useQuizData } from "@contexts/QuizDataContext";

import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";

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

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",
        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: "20px",
          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",
          },
        }}
      >
        <Box sx={{ marginBottom: "13px" }}>{quizHeaderBlock}</Box>
        {settings.cfg.startpage.background.desktop && (
          <Box sx={{ width: "100%", overflow: "hidden" }}>
            <Box
              sx={{
                width: "100%",
                height: "100%",
                display: "flex",
                justifyContent: "center",
                "& > img": {
                  width: "100%",
                  borderRadius: "12px",
                },
              }}
            >
              {backgroundBlock}
            </Box>
          </Box>
        )}
        <Box
          sx={{
            height: "80%",
            display: "flex",
            flexGrow: 1,
            flexDirection: "column",
            justifyContent: "space-between",
            width: "100%",
            marginTop: "30px",
          }}
        >
          {quizMainBlock}
        </Box>
      </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" },
      }}
    >
      <Box
        sx={{
          padding: "20px",
          height: "80%",
          display: "flex",
          flexGrow: 1,
          flexDirection: "column",
          justifyContent: "space-between",
          width: "100%",
        }}
      >
        {quizHeaderBlock}
        {quizMainBlock}
      </Box>
    </Box>
    <Box
      sx={{
        zIndex: -1,
        position: "absolute",
        left: 0,
        top: 0,
        width: "100%",
        height: "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
          ? 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]})`,
        "&::-webkit-scrollbar": { width: 0 },
      }}
    >
      <Box
        sx={{
          width: "100%",
          display: "flex",
          flexGrow: 1,
          flexDirection: "column",
          justifyContent: "space-between",
          alignItems: "flex-start",
          padding: "20px",
          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);
  }
};