import { QuestionSection, TitleAndSubtitle } from "../style";
import useReportUtils from "../../hooks/useRreportUtils";
import ChoiceList from "../components/choiceList";
import Response from "../components/response";
import QuestionDropdown from "../components/questionDropdown";
import QuizQuestion from "../components/quizQuestion";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const QuizMultipleChoice = ({ data, answerData, isPersonal }) => {
  const { findText } = useTranslation(wordStore);
  const { choiceListAndAnswer } = useReportUtils();
  const { options, answer, isCorrect, correctIndex, correctText } =
    choiceListAndAnswer({
      optionObject: data?.question_data?.question_data?.options,
      correctValue: data?.question_data?.answer,
      answerValue: answerData?.answer?.data?.data?.options?.[0],
    });
  return (
    <QuestionSection>
      <QuestionDropdown>
        <>
          <li>
            <h3>{findText("Instruction")}</h3>
            <p>{data?.question_data?.instruction}</p>
          </li>
          <li>
            <QuizQuestion data={data} />
          </li>
          <li>
            <h3>{findText("Question")}</h3>
            <p>{data?.question_data?.question_data?.question}</p>
            <div className="option_list">
              <ChoiceList options={options} />
            </div>
          </li>
        </>
      </QuestionDropdown>
      <TitleAndSubtitle>
        <Response
          goodFallback={isCorrect}
          fallbackMessage={answer?.text}
          isPersonal={isPersonal}
        />
      </TitleAndSubtitle>

      {answerData?.answer?.data && (
        <Response
          title={findText("Correct response")}
          goodFallback
          fallbackMessage={`${correctIndex + 1}. ${correctText}`}
          rightIcon
        />
      )}
    </QuestionSection>
  );
};
export default QuizMultipleChoice;
