import { Box, Typography, Button } from "@mui/material";
import { getQuestionByContentId } from "@root/questions/actions";

import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuestionsStore } from "@root/questions/store";

import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx";
import { NameplateLogo } from "@icons/NameplateLogo";
import { modes } from "../../utils/themes/Publication/themePublication";

type ResultFormProps = {
  currentQuestion: AnyTypedQuizQuestion;
  showContactForm: boolean;
  setShowContactForm: (show: boolean) => void;
  setShowResultForm: (show: boolean) => void;
};

export const ResultForm = ({
  currentQuestion,
  showContactForm,
  setShowContactForm,
  setShowResultForm,
}: ResultFormProps) => {
  const quiz = useCurrentQuiz();
  const mode = modes;
  const { questions } = useQuestionsStore();
  const resultQuestion = (questions.find(
    (question) =>
      question.type === "result" &&
      question.content.rule.parentId === currentQuestion.content.id,
  ) ||
    questions.find(
      (question) =>
        question.type === "result" && question.content.rule.parentId === "line",
    )) as AnyTypedQuizQuestion;

  const followNextForm = () => {
    setShowResultForm(false);
    setShowContactForm(true);
  };
  if (resultQuestion === undefined) return <></>;

  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",
        }}
      >
        {!resultQuestion?.content.useImage && resultQuestion.content.video && (
          <YoutubeEmbedIframe
            videoUrl={resultQuestion.content.video}
            containerSX={{
              width: "490px",
              height: "280px",
            }}
          />
        )}
        {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: mode[quiz.config.theme] ? "#4D4D4D" : "#F5F7FF",
                whiteSpace: "nowrap",
              }}
            >
              Сделано на PenaQuiz
            </Typography>
          </Box>
        </Box>

        {quiz?.config.resultInfo.when === "before" && (
          <>
            <Box
              sx={{
                boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
                width: "100%",
                flexDirection: "column",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                p: "20px",
              }}
            >
              <Button
                onClick={followNextForm}
                variant="contained"
                sx={{
                  p: "10px 20px",
                  width: "210px",
                  height: "50px",
                }}
              >
                {resultQuestion.content.hint.text || "Узнать подробнее"}
              </Button>
            </Box>
          </>
        )}
      </Box>
    </Box>
  );
};