import {
  Box,
  Button,
  ButtonBase,
  Link,
  Paper,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import YoutubeEmbedIframe from "./YoutubeEmbedIframe";
import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
import { notReachable } from "../../utils/notReachable";
import { useUADevice } from "../../utils/hooks/useUADevice";
import { NameplateLogo } from "@icons/NameplateLogo";
import { modes } from "@utils/themes/Publication/themePublication";

export default function QuizPreviewLayout() {
  const theme = useTheme();
  const quiz = useCurrentQuiz();
  const mode = modes;
  const { isMobileDevice } = useUADevice();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));

  if (!quiz) return null;

  const handleCopyNumber = () => {
    navigator.clipboard.writeText(quiz.config.info.phonenumber);
  };

  const CONST_QUIZ_THEME = quiz?.config.theme !== undefined && quiz?.config.theme === "crutch_FurnitureABC" ? "" : quiz?.config.theme || "";
  const background =
    quiz.config.startpage.background.type === "image" ? (
      quiz.config.startpage.background.desktop ? (
        <img
          src={quiz.config.startpage.background.desktop}
          alt=""
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
          }}
        />
      ) : null
    ) : quiz.config.startpage.background.type === "video" ? (
      quiz.config.startpage.background.video ? (
        <YoutubeEmbedIframe videoUrl={quiz.config.startpage.background.video} />
      ) : null
    ) : null;

  return (
    <Paper
      className="quiz-preview-draghandle"
      sx={{
        height: "100%",
        background:
          quiz.config.startpageType === "expanded"
            ? quiz.config.startpage.position === "left"
              ? "linear-gradient(90deg,#272626,transparent)"
              : quiz.config.startpage.position === "center"
                ? "linear-gradient(180deg,transparent,#272626)"
                : "linear-gradient(270deg,#272626,transparent)"
            : theme.palette.background.default,
      }}
    >
      <QuizPreviewLayoutByType
        quizHeaderBlock={
          <>
            <Box
              sx={{
                display: "flex",
                alignItems: "center",
                gap: "20px",
              }}
            >
              {quiz.config.startpage.logo && (
                <img
                  src={quiz.config.startpage.logo}
                  style={{
                    height: "30px",
                    maxWidth: "50px",
                    objectFit: "cover",
                  }}
                  alt=""
                />
              )}
              <Typography
                data-cy="company"
                sx={{
                  fontSize: "12px",
                  color:
                    quiz.config.startpageType === "expanded" && !isMobile
                      ? "white"
                      : theme.palette.text.primary,
                }}
              >
                {quiz.config.info.orgname}
              </Typography>
            </Box>
          </>
        }
        quizMainBlock={
          <>
            <Box
              sx={{
                display: "flex",
                gap: "10px",
                flexDirection: "column",
                justifyContent: "center",
                alignItems:
                  quiz.config.startpageType === "expanded" &&
                  quiz.config.startpage.position === "center"
                    ? "center"
                    : "start",
              }}
            >
              <Typography
                data-cy="heading"
                sx={{
                  fontWeight: "bold",
                  color:
                    quiz.config.startpageType === "expanded" && !isMobile
                      ? "white"
                      : theme.palette.text.primary,
                }}
              >
                {quiz.name}
              </Typography>
              <Typography
                data-cy="text"
                sx={{
                  fontSize: "12px",
                  color:
                    quiz.config.startpageType === "expanded" && !isMobile
                      ? "white"
                      : theme.palette.text.primary,
                }}
              >
                {quiz.config.startpage.description}
              </Typography>
              <Box>
                <Button
                  data-cy="startpage-button"
                  variant="contained"
                  sx={{
                    fontSize: "16px",
                    padding: "10px 15px",
                  }}
                >
                  {quiz.config.startpage.button.trim()
                    ? quiz.config.startpage.button
                    : "Пройти тест"}
                </Button>
              </Box>
            </Box>
            <Box>
              {quiz.config.info.clickable ? (
                isMobileDevice ? (
                  <Link href={`tel:${quiz.config.info.phonenumber}`}>
                    <Typography
                      sx={{
                        fontSize: "16px",
                        color: theme.palette.primary.main,
                      }}
                    >
                      {quiz.config.info.phonenumber}
                    </Typography>
                  </Link>
                ) : (
                  <ButtonBase onClick={handleCopyNumber}>
                    <Typography
                      data-cy="phonenumber"
                      sx={{
                        fontSize: "16px",
                        color: theme.palette.primary.main,
                      }}
                    >
                      {quiz.config.info.phonenumber}
                    </Typography>
                  </ButtonBase>
                )
              ) : (
                <Typography
                  data-cy="phonenumber"
                  sx={{
                    fontSize: "16px",
                    color:
                      quiz.config.startpageType === "expanded" && !isMobile
                        ? "white"
                        : theme.palette.text.primary,
                  }}
                >
                  {quiz.config.info.phonenumber}
                </Typography>
              )}
              <Typography
                data-cy="legalInformation"
                sx={{
                  fontSize: "12px",
                  color:
                    quiz.config.startpageType === "expanded" && !isMobile
                      ? "white"
                      : theme.palette.text.primary,
                }}
              >
                {quiz.config.info.law}
              </Typography>
            </Box>
            <Box
              sx={{
                display: "flex",
                alignItems: "center",
                gap: "10px",
              }}
            >
              <NameplateLogo
                style={{
                  fontSize: "30px",
                  color:
                    quiz.config.startpageType === "expanded"
                      ? "#FFFFFF"
                      : mode[CONST_QUIZ_THEME || "StandardTheme"]
                        ? "#151515"
                        : "#FFFFFF",
                }}
              />
              <Typography
                sx={{
                  fontSize: "16px",
                  color:
                    quiz.config.startpageType === "expanded"
                      ? "#F5F7FF"
                      : mode[CONST_QUIZ_THEME || "StandardTheme"]
                        ? "#4D4D4D"
                        : "#F5F7FF",
                  whiteSpace: "nowrap",
                }}
              >
                Сделано на PenaQuiz
              </Typography>
            </Box>
          </>
        }
        backgroundBlock={background}
        startpageType={quiz.config.startpageType}
        alignType={quiz.config.startpage.position}
      />
    </Paper>
  );
}

function QuizPreviewLayoutByType({
  quizHeaderBlock,
  quizMainBlock,
  backgroundBlock,
  startpageType,
  alignType,
}: {
  quizHeaderBlock: JSX.Element;
  quizMainBlock: JSX.Element;
  backgroundBlock: JSX.Element | null;
  startpageType: QuizStartpageType;
  alignType: QuizStartpageAlignType;
}) {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(630));

  function StartPageMobile() {
    return (
      <>
        <Box
          sx={{
            width: "100%",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "flex-start",
            p: "25px",
            height: "80%",
          }}
        >
          {quizHeaderBlock}
          <Box
            sx={{
              height: "80%",
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
              width: "100%",
            }}
          >
            {quizMainBlock}
          </Box>
        </Box>
        <Box
          sx={{
            width: "100%",
            overflow: "hidden",
          }}
        >
          {backgroundBlock}
        </Box>
      </>
    );
  }

  switch (startpageType) {
    case null:
    case "standard": {
      return (
        <Box
          sx={{
            display: "flex",
            flexDirection: alignType === "left" ? "row" : "row-reverse",
            flexGrow: 1,
            height: "100%",
            "&::-webkit-scrollbar": { width: 0 },
          }}
        >
          <Box
            sx={{
              width: !isTablet ? "40%" : "100%",
              padding: "16px",
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
              alignItems: !isTablet ? "flex-start" : "center",
            }}
          >
            {quizHeaderBlock}
            {quizMainBlock}
          </Box>
          <Box
            sx={{
              width: "60%",
            }}
          >
            {backgroundBlock}
          </Box>
        </Box>
      );
    }
    case "expanded": {
      return (
        <Box
          sx={{
            position: "relative",
            display: "flex",
            justifyContent: startpageAlignTypeToJustifyContent[alignType],
            flexGrow: 1,
            height: "100%",
            "&::-webkit-scrollbar": { width: 0 },
          }}
        >
          <Box
            sx={{
              width: "40%",
              position: "relative",
              padding: "16px",
              zIndex: 3,
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
              alignItems: alignType === "center" ? "center" : "start",
            }}
          >
            {quizHeaderBlock}
            {quizMainBlock}
          </Box>
          <Box
            sx={{
              position: "absolute",
              left: 0,
              top: 0,
              height: "100%",
              width: "100%",
              zIndex: -1,
            }}
          >
            {backgroundBlock}
          </Box>
        </Box>
      );
    }
    case "centered": {
      return (
        <Box
          sx={{
            padding: "16px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            alignItems: "center",
            height: "100%",
            "&::-webkit-scrollbar": { width: 0 },
          }}
        >
          {quizHeaderBlock}
          {backgroundBlock && (
            <Box
              sx={{
                width: "60%",
                overflow: "hidden",
                display: "flex",
                justifyContent: "center",
              }}
            >
              {backgroundBlock}
            </Box>
          )}
          {quizMainBlock}
        </Box>
      );
    }
    default:
      notReachable(startpageType);
  }
}

const startpageAlignTypeToJustifyContent: Record<
  QuizStartpageAlignType,
  "start" | "center" | "end"
> = {
  left: "start",
  center: "center",
  right: "end",
};
