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

import { useQuestionsStore } from "@root/quizData/store"

import type { QuizQuestionResult } from "@model/questionTypes/result";
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe"
import { NameplateLogo } from "@icons/NameplateLogo";
import { modes } from "../../utils/themes/Publication/themePublication";

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 = () => {
    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",
        ))
    } else {
      return items.find(
        (question) =>
          question.type === "result" &&
          question.content.rule.parentId === "line",
      ) 
    }
  };
  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: isMobile ? undefined : "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>

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

  }
};