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

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

import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";

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>
      <Typography>Форма результатов</Typography>
      <Typography>{JSON.stringify(resultQuestion)}</Typography>
      {!showContactForm && quiz?.config.resultInfo.when !== "after" && (
        <Button variant="contained" onClick={followNextForm}>
          Показать форму контактов
        </Button>
      )}
    </Box>
  );
};