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

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;
    console.log(quizThemes[settings.cfg.theme].isLight);

    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",
                    }}
                >
                    {settings.cfg.startpage.logo &&
                        <img
                            src={settings.cfg.startpage.logo}
                            style={{
                                height: "40px",
                                maxWidth: "110px",
                                objectFit: "cover",
                            }}
                            alt=""
                        />
                    }
                    <Typography
                        sx={{
                            fontSize: "14px",
                            color: theme.palette.text.primary,
                            wordBreak: "break-word",
                        }}
                    >
                        {settings.cfg.info.orgname}
                    </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: "23px",
                                    fontWeight: 700,
                                    m: "20px 0",
                                    color: theme.palette.text.primary,
                                    wordBreak: "break-word"
                                }}
                            >
                                {resultQuestion.description}
                            </Typography>
                        )}

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

                    {
                        resultQuestion.content.text !== "" &&
                        resultQuestion.content.text !== " " && (
                            <Typography
                                sx={{
                                    fontSize: "18px",
                                    m: "20px 0",
                                    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",
                                    }}
                                />
                                <Typography
                                    sx={{
                                        fontSize: "14px",
                                        color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
                                        whiteSpace: "nowrap",
                                    }}
                                >
                                    Сделано на PenaQuiz
                                </Typography>
                            </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
                                    href={resultQuestion.content.redirect}
                                    variant="contained"
                                    sx={{ p: "10px 20px", width: "auto", height: "50px" }}
                                >
                                    {resultQuestion.content.hint.text || "Перейти на сайт"}
                                </Button>
                            )}
                    </Box>
                </Box>
            </Box>
        </Box>
    );
};