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"

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 { questions } = useQuestionsStore();
  const resultQuestion = questions.find(
    (question) =>
      question.type === "result" &&
      (question.content.rule.parentId === "line" || currentQuestion.content.id)
  );

  


  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>

      </Box>

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