import { Box, Typography, Button } 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 { settings, items } = useQuestionsStore()

  const resultQuestion = (items.find(
    (question) =>
      question.type === "result" &&
      (question.content.rule.parentId === "line" || currentQuestion.id)
  )) ||
  items.find(
    (question) =>
      question.type === "result" && question.content.rule.parentId === "line"
  )
  const mode = modes;


  const followNextForm = () => {
    setShowResultForm(false);
    setShowContactForm(true);
  };

  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",
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "start",
            width: "490px",
          }}
        >
          {
            //@ts-ignore
            !resultQuestion?.content.useImage && resultQuestion.content.video && (
              <YoutubeEmbedIframe
                //@ts-ignore
                videoUrl={resultQuestion.content.video}
                containerSX={{
                  width: "490px",
                  height: "280px",
                }}
              />
            )}
          {
            //@ts-ignore
            resultQuestion?.content.useImage && resultQuestion.content.back && (
              <Box
                component="img"
                src={resultQuestion.content.back}
                sx={{
                  width: "490px",
                  height: "280px",
                }}
              ></Box>
            )}
          {resultQuestion.description !== "" &&
            resultQuestion.description !== " " && (
              <Typography
                sx={{
                  fontSize: "23px",
                  fontWeight: 700,
                  m: "20px 0",
                }}
              >
                {resultQuestion.description}
              </Typography>
            )}

          <Typography
            sx={{
              m: "20px 0",
            }}
          >
            {resultQuestion.title || "Форма результатов"}
          </Typography>

          {
            //@ts-ignore
            resultQuestion.content.text !== "" &&
            //@ts-ignore
            resultQuestion.content.text !== " " && (
              <Typography
                sx={{
                  fontSize: "18px",
                  m: "20px 0",
                }}
              >
                {
                  //@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",
              }}
            >
              <NameplateLogo style={{ fontSize: "34px" }} />
              <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>
    );

  }
};