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 === currentQuestion.content.id
  );

  const followNextForm = () => {
    setShowResultForm(false);
    setShowContactForm(true);
  };

  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>

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

      {!showContactForm && quiz?.config.resultInfo.when !== "after" && (
        <Button variant="contained" onClick={followNextForm}>
          Показать форму контактов
        </Button>
      )}
    </Box>
  );
};