import React, { useEffect, useState } from "react";
import {
  QuestionSection,
  QuestionSectionAction,
  QuestionSectionWithAnalysis,
  TitleAndSubtitle,
} from "../style";
import Tabs from "../components/tabs";
import useReportUtils from "../../hooks/useRreportUtils";
import Response from "../components/response";
import AnalysisButton from "../components/analysisButton";
import ResponseAudio from "../components/responseAudio";
import QuestionDropdown from "../components/questionDropdown";
import QuizQuestion from "../components/quizQuestion";
import ResponseAudioV2 from "../components/responseAudio.v2";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
import { count } from "rsuite/esm/internals/utils/ReactChildren.js";
const QuizScripted = ({
  data,
  aiData,
  setToggle,
  answerData,
  isPersonal,
  defaultSelected = 1,
  analysisLoading,
}) => {
  const { findText } = useTranslation(wordStore);
  const [selected, setSelected] = useState(defaultSelected);
  const [analysis, setAnalysis] = useState(null);
  const { quizResponses, quixSelectedModel, setupAnalysis, getTrabScriptData } =
    useReportUtils();
  const quizList = quizResponses({
    responses: answerData?.answer?.data?.data?.responses,
  });
  const selectionList = quizList?.map((item) => ({
    value: item?.key,
    label: findText(`Reponses {arg1}`, { arg1: item?.key }),
  }));
  const selectedResponse =
    quizList?.find((item) => item?.key === selected) || {};
  const selectedModel = quixSelectedModel(selectedResponse, aiData);
  useEffect(() => {
    if (selectedResponse) {
      const models = setupAnalysis(
        selectedModel,
        selectedResponse?.recording,
        data?.ai_score,
      );
      setAnalysis(models);
    }
  }, [selectedResponse?.key]);
  const transcript = getTrabScriptData(analysis?.models);
  return (
    <QuestionSection>
      <Tabs
        options={selectionList}
        selected={selected}
        onChange={setSelected}
      />
      <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>
          </li>
        </>
      </QuestionDropdown>

      <Response response={selectedResponse?.text} isPersonal={isPersonal} />

      <QuestionSectionWithAnalysis>
        {!analysisLoading && (
          <Response
            title=""
            response={
              analysis?.models?.length > 0 &&
              transcript?.length > 0 &&
              selectedResponse?.recording
                ? transcript
                : undefined
            }
            isAiWordFlow
            defaultError={!selectedResponse?.recording}
          />
        )}

        <QuestionSectionAction>
          {selectedResponse?.recording && (
            <ResponseAudioV2
              streamUrl={selectedResponse?.recording?.url}
              url={selectedResponse?.recording?.uploaded_media_url}
              audioData={selectedResponse?.recording}
              key={selected}
            />
          )}

          <AnalysisButton
            loading={analysisLoading}
            disabled={
              !(analysis?.models?.length > 0 && selectedResponse?.recording) ||
              analysisLoading
            }
            onClick={() => {
              setToggle({
                ...analysis,
                defaultSelected: selected,
              });
            }}
          />
        </QuestionSectionAction>
      </QuestionSectionWithAnalysis>
    </QuestionSection>
  );
};
export default QuizScripted;
