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"

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)
  );

  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 &&
            //@ts-ignore
            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>

        </Box>

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