frontAnswerer/lib/components/ViewPublicationPage/ResultForm.tsx

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

import {NameplateLogo} from "@icons/NameplateLogo";
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";

import {useQuizData} from "@contexts/QuizDataContext";
import {quizThemes} from "@utils/themes/Publication/themePublication";
import {useRootContainerSize} from "../../contexts/RootContainerWidthContext";
import type {QuizQuestionResult} from "../../model/questionTypes/result";
import {useQuizViewStore} from "@/stores/quizView";
import {DESIGN_LIST} from "@/utils/designList";
import {useEffect} from "react";

type ResultFormProps = {
    resultQuestion: QuizQuestionResult;
};

export const ResultForm = ({resultQuestion}: ResultFormProps) => {
    const theme = useTheme();
    const isMobile = useRootContainerSize() < 650;
    const isTablet = useRootContainerSize() < 1100;
    const {settings, show_badge, quizId} = useQuizData();
    const setCurrentQuizStep = useQuizViewStore(
        (state) => state.setCurrentQuizStep,
    );
    const spec = settings.cfg.spec;

    useEffect(() => {
        //@ts-ignore
        const YM = window?.ym;
        //@ts-ignore
        const VP = window?._tmr;
        if (YM !== undefined && settings.cfg.yandexMetricNumber !== undefined) {
            YM(
                settings.cfg.yandexMetricNumber,
                "reachGoal",
                `penaquiz-result-{${resultQuestion.id}}`,
            );
        }
        if (VP !== undefined && settings.cfg.vkMetricNumber !== undefined) {
            VP.push({
                type: "reachGoal",
                id: settings.cfg.vkMetricNumber,
                goal: `penaquiz-result-{${resultQuestion.id}}`,
            });
        }
    }, []);

    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,
                position: "relative",
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-between",
                    alignItems: "center",
                    width: "100%",
                    height: "100%",
                    background:
                        settings.cfg.design && !isMobile
                            ? quizThemes[settings.cfg.theme].isLight
                                ? "transparent"
                                : "linear-gradient(90deg, rgba(39, 38, 38, 0.95) 7.66%, rgba(42, 42, 46, 0.85) 42.12%, rgba(51, 54, 71, 0.4) 100%)"
                            : theme.palette.background.default,
                }}
            >
                <Box
                    sx={{
                        display: "flex",
                        flexDirection: "column",
                        alignItems: "center",
                        width: "100%",
                        height: "100%",
                        overflow: "auto",
                        padding: "0 20px 20px",
                        scrollbarWidth: "none",
                        "&::-webkit-scrollbar": {
                            width: 0,
                        },
                    }}
                >
                    <Box
                        sx={{
                            display: "flex",
                            alignItems: "center",
                            flexWrap: "wrap",
                            mb: "10px",
                            width: "100%",
                            maxWidth: "700px",
                            backgroundColor: "#9A9AAF1A",
                            borderRadius: "0 0 12px 12px",
                            padding: "20px 20px 15px",
                        }}
                    >
                        <Typography
                            sx={{
                                fontSize: "17px",
                                color: "#9A9AAF",
                                wordBreak: "break-word",
                            }}
                        >
                            Ваш результат:
                        </Typography>
                    </Box>
                    <Box
                        sx={{
                            display: "flex",
                            flexDirection: "column",
                            alignItems: "flex-start",
                            width: "100%",
                            maxWidth: "700px",
                        }}
                    >
                        {!resultQuestion?.content.useImage &&
                            resultQuestion.content.video && (
                                <YoutubeEmbedIframe
                                    videoUrl={resultQuestion.content.video}
                                    containerSX={{
                                        width: "100%",
                                        maxWidth: "700px",
                                        height: isMobile ? "100%" : "306px",
                                    }}
                                />
                            )}
                        {resultQuestion?.content.useImage &&
                            resultQuestion.content.back && (
                                <Box
                                    sx={{
                                        width: "100%",
                                        display: "flex",
                                        justifyContent: "center",
                                    }}
                                >
                                    <img
                                        alt="resultImage"
                                        src={resultQuestion.content.back}
                                        style={{
                                            width: "100%",
                                            height: spec ? "auto" : isMobile ? "236px" : "306px",
                                            borderRadius: "12px",
                                            objectFit: "cover",
                                            overflow: "hidden",
                                        }}
                                    />
                                </Box>
                            )}
                        {resultQuestion.description !== "" &&
                            resultQuestion.description !== " " && (
                                <Typography
                                    sx={{
                                        fontSize: "27px",
                                        lineHeight: "32px",
                                        fontWeight: 700,
                                        mt: "30px",
                                        color: theme.palette.text.primary,
                                        wordBreak: "break-word",
                                    }}
                                >
                                    {resultQuestion.description}
                                </Typography>
                            )}

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

                        {resultQuestion.content.text !== "" &&
                            resultQuestion.content.text !== " " && (
                                <Typography
                                    sx={{
                                        fontSize: "17px",
                                        lineHeight: "20px",
                                        mt: "25px ",
                                        wordBreak: "break-word",
                                        color: theme.palette.text.primary,
                                    }}
                                >
                                    {resultQuestion.content.text}
                                </Typography>
                            )}
                    </Box>
                </Box>
                {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",
                            alignSelf: isMobile ? "center" : "end",
                            margin: isMobile ? "15px 0 0" : "15px 25px 0 0",
                            gap: "10px",
                            textDecoration: "none",
                            mb: "15px",
                            position: isTablet || isMobile ? "sticky" : "absolute",
                            bottom: "90px",
                        }}
                    >
                        <NameplateLogo
                            style={{
                                fontSize: "23px",
                                color: quizThemes[settings.cfg.theme].isLight
                                    ? "#000000"
                                    : "#F5F7FF",
                            }}
                        />
                    </Box>
                )}
                <Box
                    sx={{
                        width: "100%",
                        flexDirection: "column",
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        borderTop: "1px solid #9A9AAF80",
                        p: "20px",
                        position: "sticky",
                        bottom: 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
                                href={
                                    resultQuestion.content.redirect.includes("https")
                                        ? resultQuestion.content.redirect
                                        : `https://${resultQuestion.content.redirect}`
                                }
                                variant="contained"
                                sx={{
                                    p: "10px 20px",
                                    width: "auto",
                                }}
                            >
                                {resultQuestion.content.hint.text || "Перейти на сайт"}
                            </Button>
                        )}
                </Box>
            </Box>
        </Box>
    );
};