import React, { useEffect, useState } from "react";
import {
  QuestionSection,
  QuestionSectionAction,
  QuestionSectionWithAnalysis,
} from "../style";
import Response from "../components/response";
import AnalysisButton from "../components/analysisButton";
import ResponseAudio from "../components/responseAudio";
import useReportUtils from "../../hooks/useRreportUtils";
import QuestionDropdown from "../components/questionDropdown";
import ResponseAudioV2 from "../components/responseAudio.v2";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const Reading = ({
  data,
  aiData,
  setToggle,
  answerData,
  isPersonal,
  analysisLoading,
}) => {
  const { findText } = useTranslation(wordStore);
  const [analysis, setAnalysis] = useState(null);
  const { setupAnalysis, getTrabScriptData } = useReportUtils();
  useEffect(() => {
    if (data) {
      const models = setupAnalysis(
        aiData,
        answerData?.answer?.data?.recording,
        answerData?.ai_score,
      );
      setAnalysis(models);
    }
  }, [data, answerData]);
  const transcript = getTrabScriptData(analysis?.models);

  return (
    <QuestionSection>
      <QuestionDropdown>
        <>
          <li>
            <h3>{findText("Instruction")}</h3>
            <p>{data?.question_data?.instruction}</p>
          </li>
          <li>
            <h3>{findText("Question")}</h3>
            <p>{data?.question_data?.article_body}</p>
          </li>
        </>
      </QuestionDropdown>

      <QuestionSectionWithAnalysis>
        {!analysisLoading && (
          <Response
            response={
              analysis?.models?.length > 0 && transcript?.length > 0
                ? transcript
                : undefined
            }
            isAiWordFlow
            defaultError={!answerData?.answer?.data?.recording}
            isPersonal={isPersonal}
          />
        )}

        <QuestionSectionAction>
          {answerData?.answer?.data?.recording && (
            <ResponseAudioV2
              streamUrl={answerData?.answer?.data?.recording?.url}
              url={answerData?.answer?.data?.recording?.uploaded_media_url}
              audioData={answerData?.answer?.data?.recording}
              key={answerData?.answer?.data?.recording?.id}
            />
          )}
          <AnalysisButton
            loading={analysisLoading}
            disabled={!analysis?.models?.length > 0 || analysisLoading}
            onClick={() => {
              setToggle(analysis);
            }}
          />
        </QuestionSectionAction>
      </QuestionSectionWithAnalysis>
    </QuestionSection>
  );
};
export default Reading;
