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 ContactFormProps = {
  currentQuestion: AnyTypedQuizQuestion;
  showResultForm: boolean;
  setShowContactForm: (show: boolean) => void;
  setShowResultForm: (show: boolean) => void;
};

export const ContactForm = ({
  currentQuestion,
  showResultForm,
  setShowContactForm,
  setShowResultForm,
}: ContactFormProps) => {
  const quiz = useCurrentQuiz();
  const { questions } = useQuestionsStore();

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

  const resultQuestion = questions.find(
    (question) =>
      question.type === "result" &&
      question.content.rule.parentId === currentQuestion.content.id
  );

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