import React, { useState } from "react";
import {
  ComprehensionContainer,
  ComprehensionContainerResponse,
  ComprehensionFeekback,
  ComprehensionFeekbackHeader,
} from "../style";
import TranslateDropdown from "./translateDropdown";
import useLanguages from "../api/useLanguage";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";

const FeekbackResponsive = ({
  title,
  content,
  color = "#00C2C2",
  isPersonal,
  disablelang,
}) => {
  const [translate, setTranslate] = useState(null);
  const { translateLangData, handleTranslate } = useLanguages();
  return (
    <ComprehensionFeekback>
      <ComprehensionFeekbackHeader>
        <h3 style={{ color }}>{title}</h3>
        {!disablelang && isPersonal && (
          <TranslateDropdown
            loading={translateLangData?.loading}
            onChange={async (lang) => {
              const code = lang?.code;
              if (code === "en" || !lang) {
                setTranslate(null);
                return;
              }
              const res = await handleTranslate({
                texts: [content],
                source_language: "en",
                target_language: code,
              });

              if (res?.data) {
                setTranslate(res?.data?.data?.[0]?.translation);
              }
            }}
          />
        )}
      </ComprehensionFeekbackHeader>
      <p>{translate || content}</p>
    </ComprehensionFeekback>
  );
};

const Comprehension = ({ Aidata, isPersonal }) => {
  const { findText } = useTranslation(wordStore);
  const model = Aidata?.data;

  return (
    <ComprehensionContainer>
      <li>
        <ComprehensionContainerResponse>
          <p>{findText("Student response")}</p>
          <div>
            <p>
              {model?.studentTextAnswers?.[0] ||
                model?.results?.[0]?.transcription ||
                Aidata?.responseText}
            </p>
          </div>
        </ComprehensionContainerResponse>
      </li>
      <li>
        <FeekbackResponsive
          title={findText("Correct answer")}
          disablelang
          content={model?.model_data?.generate?.answers?.[0]?.answer}
        />
      </li>
      <li>
        <FeekbackResponsive
          title={findText("Feedback")}
          color="#30D468"
          content={model?.model_data?.evaluate?.results?.[0]?.feedback}
          isPersonal={isPersonal}
        />
      </li>
    </ComprehensionContainer>
  );
};

export default Comprehension;
