import React from "react";
import { QuestionSection, TitleAndSubtitle } from "../style";
import Response from "../components/response";
import ResponseAudio from "../components/responseAudio";
import useReportUtils from "../../hooks/useRreportUtils";
import ChoiceList from "../components/choiceList";
import QuestionDropdown from "../components/questionDropdown";
import ResponseAudioV2 from "../components/responseAudio.v2";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const WordPlayMultipleChoice = ({ data, answerData, isPersonal }) => {
  const { findText } = useTranslation(wordStore);
  const { choiceListAndAnswer } = useReportUtils();
  const { options, answer, isCorrect, correctIndex, correctText } =
    choiceListAndAnswer({
      optionObject: data?.question_data?.answer_format_data?.options,
      correctValue: data?.question_data?.answer,
      answerValue: answerData?.answer?.data?.answer_text,
    });
  return (
    <QuestionSection>
      <QuestionDropdown>
        <>
          <li>
            <h3>{findText("Instruction")}</h3>
            <p>{data?.question_data?.instruction}</p>
            <ResponseAudioV2
              key={data?.question_data?.voice_type_data?.audio?.id}
              audioData={data?.question_data?.voice_type_data?.audio}
              streamUrl={data?.question_data?.voice_type_data?.audio?.url}
              url={
                data?.question_data?.voice_type_data?.audio?.uploaded_media_url
              }
            />
          </li>
          <li>
            <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={isCorrect}
          fallbackMessage={
            correctText
              ? findText("{arg1}. {correctText}", {
                  arg1: correctIndex + 1,
                  correctText: correctText,
                })
              : null
          }
          rightIcon={correctText}
        />
      )}
    </QuestionSection>
  );
};
export default WordPlayMultipleChoice;
