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

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

import { useQuizData } from "@utils/hooks/useQuizData";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useCallback, useEffect, useMemo } from "react";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import type { QuizQuestionResult } from "../../model/questionTypes/result";


type ResultFormProps = {
    currentQuestion: any;
    showContactForm: boolean;
    setShowContactForm: (show: boolean) => void;
    setShowResultForm: (show: boolean) => void;
};
export const ResultForm = ({
    currentQuestion,
    showContactForm,
    setShowContactForm,
    setShowResultForm,
}: ResultFormProps) => {
    const theme = useTheme();
    const isMobile = useRootContainerSize() < 650;
    const { settings, questions } = useQuizData();

    const resultQuestion = useMemo(() => {
        if (settings?.cfg.haveRoot) {
            //ищём для ветвления
            return (questions.find(
                (question): question is QuizQuestionResult =>
                    question.type === "result" &&
                    question.content.rule.parentId === currentQuestion.content.id
            ) || questions.find(
                (question): question is QuizQuestionResult =>
                    question.type === "result" &&
                    question.content.rule.parentId === "line"
            ));
        } else {
            return questions.find(
                (question): question is QuizQuestionResult =>
                    question.type === "result" &&
                    question.content.rule.parentId === "line"
            );
        }
    }, [currentQuestion.content.id, questions, settings?.cfg.haveRoot]);

    const followNextForm = useCallback(() => {
        setShowResultForm(false);
        setShowContactForm(true);
    }, [setShowContactForm, setShowResultForm]);

    useEffect(() => {
        if (!resultQuestion) {
            followNextForm();
        }
    }, [followNextForm, resultQuestion]);

    if (!resultQuestion) return null;

    return (
        <Box
            sx={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "space-between",
                height: "100vh",
                width: "100vw",
                pt: "28px",
                overflow: "auto",
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "start",
                    width: isMobile ? "100%" : "490px",
                    padding: isMobile ? "0 16px" : undefined,
                }}
            >
                {
                    !resultQuestion?.content.useImage && resultQuestion.content.video && (
                        <YoutubeEmbedIframe
                            videoUrl={resultQuestion.content.video}
                            containerSX={{
                                width: isMobile ? "100%" : "490px",
                                height: isMobile ? "100%" : "280px",
                            }}
                        />
                    )
                }
                {
                    resultQuestion?.content.useImage && resultQuestion.content.back && (
                        <Box
                            component="img"
                            src={resultQuestion.content.back}
                            sx={{
                                width: isMobile ? "100%" : "490px",
                                height: isMobile ? "100%" : "280px",
                            }}
                        ></Box>
                    )
                }
                {resultQuestion.description !== "" &&
                    resultQuestion.description !== " " && (
                        <Typography
                            sx={{
                                fontSize: "23px",
                                fontWeight: 700,
                                m: "20px 0",
                                color: theme.palette.text.primary,
                            }}
                        >
                            {resultQuestion.description}
                        </Typography>
                    )}

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

                {
                    resultQuestion.content.text !== "" &&
                    resultQuestion.content.text !== " " && (
                        <Typography
                            sx={{
                                fontSize: "18px",
                                m: "20px 0",
                                color: theme.palette.text.primary,
                            }}
                        >
                            {
                                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",
                            gap: "10px",
                        }}
                    >
                        <NameplateLogo
                            style={{
                                fontSize: "34px",
                                color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF",
                            }}
                        />
                        <Typography
                            sx={{
                                fontSize: "20px",
                                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",
                        p: "20px",
                    }}
                >
                    {settings?.cfg.resultInfo.showResultForm === "before" && (
                        <Button
                            onClick={followNextForm}
                            variant="contained"
                            sx={{
                                p: "10px 20px",
                                width: "210px",
                                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: "210px", height: "50px" }}
                            >
                                {resultQuestion.content.hint.text || "Перейти на сайт"}
                            </Button>
                        )}
                </Box>
            </Box>
        </Box>
    );
};