import React, { useEffect, useState } from "react";
import {
  QuestionSection,
  QuestionSectionAction,
  QuestionSectionWithAnalysis,
  TitleAndSubtitle,
} from "../style";
import Response from "../components/response";
import AnalysisButton from "../components/analysisButton";
import useReportUtils from "../../hooks/useRreportUtils";
import QuestionDropdown from "../components/questionDropdown";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";

const EssayWritten = ({
  data,
  aiData,
  setToggle,
  answerData,
  isPersonal,
  analysisLoading,
}) => {
  const { findText } = useTranslation(wordStore);
  const [analysis, setAnalysis] = useState(null);
  const { setupAnalysis } = useReportUtils();
  useEffect(() => {
    if (data) {
      const models = setupAnalysis(aiData, null, answerData?.ai_score);
      setAnalysis(models);
    }
  }, [data, answerData]);
  return (
    <QuestionSection>
      <QuestionDropdown>
        <>
          <li>
            <h3>{findText("Instruction")}</h3>
            <p>{data?.question_data?.instruction}</p>
          </li>
          <li>
            <h3>{findText("Essay topic")}</h3>
            <p>{data?.question_data?.question_title}</p>
          </li>
        </>
      </QuestionDropdown>

      <QuestionSectionWithAnalysis>
        <Response
          response={data?.answer?.data?.data?.text}
          isPersonal={isPersonal}
        />
        <QuestionSectionAction>
          <AnalysisButton
            loading={analysisLoading}
            disabled={!analysis?.models?.length > 0 || analysisLoading}
            onClick={() => {
              setToggle(analysis);
            }}
          />
        </QuestionSectionAction>
      </QuestionSectionWithAnalysis>
    </QuestionSection>
  );
};
export default EssayWritten;
