frontAnswerer/lib/components/ViewPublicationPage/ResultForm.tsx

import { useEffect } from "react";
import { Box, Button, Link, Typography, useTheme } from "@mui/material";

import { useQuizViewStore } from "@/stores/quizView";

import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext";

import { useVkMetricsGoals } from "@/utils/hooks/metrics/useVkMetricsGoals";
import { useYandexMetricsGoals } from "@/utils/hooks/metrics/useYandexMetricsGoals";
import { DESIGN_LIST } from "@/utils/designList";
import { quizThemes } from "@utils/themes/Publication/themePublication";

import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";

import { NameplateLogo } from "@icons/NameplateLogo";

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

type ResultFormProps = {
  resultQuestion: QuizQuestionResult;
};

export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
  const theme = useTheme();
  const isMobile = useRootContainerSize() < 650;
  const isTablet = useRootContainerSize() < 1000;
  const { settings, show_badge, quizId } = useQuizData();
  const setCurrentQuizStep = useQuizViewStore(
    (state) => state.setCurrentQuizStep
  );
  const spec = settings.cfg.spec;
  const vkMetrics = useVkMetricsGoals(settings.cfg.vkMetricsNumber);
  const yandexMetrics = useYandexMetricsGoals(settings.cfg.yandexMetricsNumber);

  useEffect(() => {
    vkMetrics.resultIdShown(resultQuestion.id);
    yandexMetrics.resultIdShown(resultQuestion.id);
    vkMetrics.resultShown();
    yandexMetrics.resultShown();
  }, []);

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "space-between",
        height: "100%",
        minHeight: "100%",
        width: "100%",
        backgroundColor: theme.palette.background.default,
        backgroundPosition: "center",
        backgroundSize: "cover",
        backgroundImage:
          settings.cfg.design && !isMobile
            ? `url(${DESIGN_LIST[settings.cfg.theme]})`
            : null,
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          alignItems: "center",
          pt: "30px",
          width: "100%",
          height: "100%",
          overflow: "auto",
          background:
            settings.cfg.design && !isMobile
              ? quizThemes[settings.cfg.theme].isLight
                ? "transparent"
                : "linear-gradient(90deg,#272626, transparent)"
              : theme.palette.background.default,
          scrollbarWidth: "none",
          "&::-webkit-scrollbar": {
            width: 0,
          },
        }}
      >
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            flexWrap: "wrap",
            gap: "30px",
            mb: "7px",
          }}
        >
          <Typography
            sx={{
              fontSize: "14px",
              color: theme.palette.text.primary,
              wordBreak: "break-word",
            }}
          >
            Ваш результат:
          </Typography>
        </Box>
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "flex-start",
            width: "100%",
            maxWidth: "844px",
            padding: isMobile ? "0 16px" : isTablet ? "0 78px" : undefined,
          }}
        >
          {!resultQuestion?.content.useImage &&
            resultQuestion.content.video && (
              <YoutubeEmbedIframe
                videoUrl={resultQuestion.content.video}
                containerSX={{
                  width: "100%",
                  maxWidth: "844px",
                  height: isMobile ? "100%" : "306px",
                }}
              />
            )}
          {resultQuestion?.content.useImage && resultQuestion.content.back && (
            <Box
              sx={{ width: "100%", display: "flex", justifyContent: "center" }}
            >
              <Box
                component="img"
                src={resultQuestion.content.back}
                sx={{
                  width: "100%",
                  maxWidth: "306px",
                  height: spec ? "auto" : isMobile ? "236px" : "306px",
                  borderRadius: "8px",
                  objectFit: "contain",
                }}
              />
            </Box>
          )}
          {resultQuestion.description !== "" &&
            resultQuestion.description !== " " && (
              <Typography
                sx={{
                  fontSize: "24px",
                  fontWeight: 700,
                  mt: "25px",
                  color: theme.palette.text.primary,
                  wordBreak: "break-word",
                }}
              >
                {resultQuestion.description}
              </Typography>
            )}

          <Typography
            sx={{
              mt: "20px",
              color: theme.palette.text.primary,
              wordBreak: "break-word",
            }}
          >
            {resultQuestion.title}
          </Typography>

          {resultQuestion.content.text !== "" &&
            resultQuestion.content.text !== " " && (
              <Typography
                sx={{
                  fontSize: "18px",
                  mt: "30px ",
                  wordBreak: "break-word",
                  color: theme.palette.text.primary,
                }}
              >
                {resultQuestion.content.text}
              </Typography>
            )}
        </Box>

        <Box width="100%">
          <Box
            sx={{
              display: "flex",
              width: "100%",
              justifyContent: "end",
              px: "20px",
            }}
          >
            {show_badge && (
              <Box
                component={Link}
                target={"_blank"}
                href={`https://${window.location.hostname.includes("s") ? "s" : ""
                  }quiz.pena.digital/squiz/quiz/logo?q=${quizId}`}
                sx={{
                  display: "flex",
                  alignItems: "center",
                  mt: "15px",
                  gap: "10px",
                  textDecoration: "none",
                  mb: "15px",
                }}
              >
                <NameplateLogo
                  style={{
                    fontSize: "23px",
                    color: quizThemes[settings.cfg.theme].isLight
                      ? "#000000"
                      : "#F5F7FF",
                  }}
                />
              </Box>
            )}
          </Box>

          <Box
            sx={{
              // boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
              width: "100%",
              flexDirection: "column",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              borderTop: "1px solid #9A9AAF80",
              p:
                (settings.cfg.resultInfo.showResultForm === "before" &&
                  !settings.cfg.score) ||
                  (settings.cfg.resultInfo.showResultForm === "after" &&
                    resultQuestion.content.redirect)
                  ? "20px"
                  : "0",
            }}
          >
            {settings.cfg.resultInfo.showResultForm === "before" &&
              !settings.cfg.score && (
                <Button
                  onClick={() => setCurrentQuizStep("contactform")}
                  variant="contained"
                  sx={{
                    p: "10px 20px",
                    width: "auto",
                    height: "50px",
                  }}
                >
                  {resultQuestion.content.hint.text || "Узнать подробнее"}
                </Button>
              )}
            {settings.cfg.resultInfo.showResultForm === "after" &&
              resultQuestion.content.redirect && (
                <Button
                  onClick={() => {
                    vkMetrics.resultLink();
                    yandexMetrics.resultLink();
                    setTimeout(() => {
                      location.href =
                        (resultQuestion.content.redirect.includes("https")
                          ? resultQuestion.content.redirect
                          : `https://${resultQuestion.content.redirect}`).replace(/\s+/g, "");
                    }, 1000)
                  }}
                  variant="contained"
                  sx={{ p: "10px 20px", width: "auto", height: "50px" }}
                >
                  {resultQuestion.content.hint.text || "Перейти на сайт"}
                </Button>
              )}
          </Box>
        </Box>
      </Box>
    </Box >
  );
};