import {
  Box,
  Typography,
  Button,
  useMediaQuery,
  useTheme,
} from "@mui/material";

import { useQuestionsStore } from "@stores/quizData/store";

import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
import { NameplateLogo } from "@icons/NameplateLogo";
import { modes } from "../../utils/themes/Publication/themePublication";

import type { QuizQuestionResult } from "../../model/questionTypes/result";

type ResultFormProps = {
  currentQuestion: any;
  showContactForm: boolean;
  setShowContactForm: (show: boolean) => void;
  setShowResultForm: (show: boolean) => void;
};
export const ResultForm = ({
  currentQuestion,
  showContactForm,
  setShowContactForm,
  setShowResultForm,
}: ResultFormProps) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  const { settings, items } = useQuestionsStore();
  const mode = modes;

  const searchResult = (): QuizQuestionResult => {
    if (Boolean(settings?.cfg.haveRoot)) {
      //ищём для ветвления
      return (items.find(
        (question) =>
          question.type === "result" &&
          question.content.rule.parentId === currentQuestion.content.id
      ) ||
        items.find(
          (question) =>
            question.type === "result" &&
            question.content.rule.parentId === "line"
        )) as QuizQuestionResult;
    } else {
      return items.find(
        (question) =>
          question.type === "result" &&
          question.content.rule.parentId === "line"
      ) as QuizQuestionResult;
    }
  };
  const resultQuestion = searchResult();

  const followNextForm = () => {
    setShowResultForm(false);
    setShowContactForm(true);
  };
  console.log(resultQuestion);
  if (resultQuestion === null || resultQuestion === undefined) {
    followNextForm();
    return <></>;
  } else {
    return (
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "space-between",
          height: "100vh",
          width: "100vw",
          pt: "28px",
          overflow: "auto",
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "start",
            width: isMobile ? "100%" : "490px",
            padding: isMobile ? "0 16px" : undefined,
          }}
        >
          {
            //@ts-ignore
            !resultQuestion?.content.useImage &&
              resultQuestion.content.video && (
                <YoutubeEmbedIframe
                  //@ts-ignore
                  videoUrl={resultQuestion.content.video}
                  containerSX={{
                    width: isMobile ? "100%" : "490px",
                    height: isMobile ? "100%" : "280px",
                  }}
                />
              )
          }
          {
            //@ts-ignore
            resultQuestion?.content.useImage && resultQuestion.content.back && (
              <Box
                component="img"
                src={resultQuestion.content.back}
                sx={{
                  width: isMobile ? "100%" : "490px",
                  height: isMobile ? "100%" : "280px",
                }}
              ></Box>
            )
          }
          {resultQuestion.description !== "" &&
            resultQuestion.description !== " " && (
              <Typography
                sx={{
                  fontSize: "23px",
                  fontWeight: 700,
                  m: "20px 0",
                  color: theme.palette.text.primary,
                }}
              >
                {resultQuestion.description}
              </Typography>
            )}

          <Typography
            sx={{
              m: "20px 0",
              color: theme.palette.text.primary,
            }}
          >
            {resultQuestion.title}
          </Typography>

          {
            //@ts-ignore
            resultQuestion.content.text !== "" &&
              //@ts-ignore
              resultQuestion.content.text !== " " && (
                <Typography
                  sx={{
                    fontSize: "18px",
                    m: "20px 0",
                    color: theme.palette.text.primary,
                  }}
                >
                  {
                    //@ts-ignore
                    resultQuestion.content.text
                  }
                </Typography>
              )
          }
        </Box>

        <Box width="100%">
          <Box
            sx={{
              display: "flex",
              width: "100%",
              justifyContent: "end",
              px: "20px",
            }}
          >
            <Box
              sx={{
                display: "flex",
                alignItems: "center",
                mt: "15px",
                gap: "10px",
              }}
            >
              <NameplateLogo
                style={{
                  fontSize: "34px",
                  color: mode[settings.cfg.theme] ? "#000000" : "#F5F7FF",
                }}
              />
              <Typography
                sx={{
                  fontSize: "20px",
                  //@ts-ignore
                  color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF",
                  whiteSpace: "nowrap",
                }}
              >
                Сделано на PenaQuiz
              </Typography>
            </Box>
          </Box>

          <Box
            sx={{
              boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
              width: "100%",
              flexDirection: "column",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              p: "20px",
            }}
          >
            {settings?.cfg.resultInfo.showResultForm === "before" && (
              <Button
                onClick={followNextForm}
                variant="contained"
                sx={{
                  p: "10px 20px",
                  width: "210px",
                  height: "50px",
                }}
              >
                {resultQuestion.content.hint.text || "Узнать подробнее"}
              </Button>
            )}
            {settings?.cfg.resultInfo.showResultForm === "after" &&
              resultQuestion.content.redirect && (
                <Button
                  href={resultQuestion.content.redirect}
                  variant="contained"
                  sx={{ p: "10px 20px", width: "210px", height: "50px" }}
                >
                  {resultQuestion.content.hint.text || "Перейти на сайт"}
                </Button>
              )}
          </Box>
        </Box>
      </Box>
    );
  }
};