import { useEffect, useState } from "react";
import {
  QuestionSection,
  QuestionSectionAction,
  QuestionSectionWithAnalysis,
  TitleAndSubtitle,
} from "../style";
import useReportUtils from "../../hooks/useRreportUtils";
import Tabs from "../components/tabs";
import Response from "../components/response";
import ResponseAudio from "../components/responseAudio";
import AnalysisButton from "../components/analysisButton";
import QuestionDropdown from "../components/questionDropdown";
import ResponseAudioV2 from "../components/responseAudio.v2";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const DialogueUnscripted = ({
  data,
  aiData,
  setToggle,
  answerData,
  isPersonal,
  defaultSelected = 1,
  analysisLoading,
}) => {
  const { findText } = useTranslation(wordStore);
  const [selected, setSelected] = useState(defaultSelected);
  const [analysis, setAnalysis] = useState(null);
  const {
    dialogueResponses,
    setupAnalysis,
    getTrabScriptData,
    dialpgueSelectedModel,
  } = useReportUtils();
  const dialogueList = dialogueResponses({
    responses: Object.values(answerData?.answer?.data?.responses || {}),
    questionListEntries: Object.entries(data?.question_data?.dialogues_data),
  });
  const selectionList = dialogueList?.map((item) => ({
    value: item?.key,
    label: findText(`Dialogue {arg1}`, { arg1: item?.key }),
  }));
  const selectedResponse =
    dialogueList?.find((item) => item?.key === selected) || {};
  const selectedModel = dialpgueSelectedModel(selectedResponse, aiData);

  useEffect(() => {
    if (selectedResponse) {
      const models = setupAnalysis(
        selectedModel,
        selectedResponse?.recording,
        data?.ai_score,
      );
      setAnalysis(models);
    }
  }, [selectedResponse?.key, answerData]);
  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>
            <h3>{findText("Scenario")}</h3>
            <p>{data?.question_data?.scenario_description}</p>
          </li>
          <li>
            <h3>{findText("Who is asking the question")}</h3>
            <p>{data?.question_data?.set_who_ask_the_question}</p>
          </li>
          <li>
            <h3>{findText("Question")}</h3>
            <p>{selectedResponse?.question}</p>
          </li>
        </>
      </QuestionDropdown>

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

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

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