frontAnswerer/src/pages/ViewPublicationPage/ResultForm.tsx

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

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>

          {resultQuestion.content.text !== "" && resultQuestion.content.text !== " " && <Typography
            sx={{
              fontSize: "18px",
              m: "20px 0"
            }}
          >{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", color: "#4D4D4D", whiteSpace: "nowrap" }}>Сделано на PenaQuiz</Typography>
            </Box>

          </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>
      </Box>
    );
  }
};