import React, { useEffect, useState } from "react";
import {
  EvaluationCharacters,
  EvaluationCharactersItem,
  ModelComtainer,
  ModelContent,
  EvaluationHeader,
  EvaluationWrapper,
} from "../style";
import classNames from "classnames";
import EvalutionFeedback from "./EvalutionFeedback";
import GreenAIcon from "../icons/greenAIcon";
import YellowAIcon from "../icons/yellowAIcon copy";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const Evaluation = ({ Aidata, isPersonal }) => {
  const { findText } = useTranslation(wordStore);
  const [selected, setSelected] = useState(null);
  const optiomData = Aidata?.data?.optionData;
  const optionList = optiomData?.map((item) => ({
    label: item?.label,
    value: item?.id,
  }));
  useEffect(() => {
    if (optionList?.length) {
      setSelected(optionList[0]?.value);
    }
  }, [optionList?.length]);
  const selectSection = optiomData?.find((item) => item?.id === selected);
  return (
    <ModelComtainer>
      <EvaluationHeader>
        <p>
          {(() => {
            const sectionLabel = selectSection?.label?.toLowerCase();
            if (sectionLabel === "critical") {
              return findText(
                "This is the general feedback for the critical analysis."
              );
            } else if (sectionLabel === "character") {
              return findText(
                "This is the general feedback for the character analysis."
              );
            } else if (sectionLabel === "evidence") {
              return findText(
                "This is the general feedback for the evidence analysis."
              );
            } else if (sectionLabel === "coherence") {
              return findText(
                "This is the general feedback for the coherence analysis."
              );
            } else {
              return findText(
                "This is the general feedback for the relevance analysis."
              );
            }
          })()}
        </p>
      </EvaluationHeader>
      <ModelContent>
        <ul className="ul_tabs">
          {optionList?.map((item) => (
            <li
              key={item?.value}
              className={classNames({
                active: selected === item?.value,
              })}
              onClick={() => {
                setSelected(item?.value);
              }}
            >
              {findText(item?.label)}
            </li>
          ))}
        </ul>

        {selectSection?.id !== "character" && (
          <EvaluationWrapper>
            {selectSection?.data?.rating && (
              <h3>{selectSection?.data?.rating}</h3>
            )}{" "}
            <EvalutionFeedback
              title={findText("Feedback")}
              hideWarning
              key={selectSection?.id}
              withBorder
              highlightText={selectSection?.data?.feedback || ""}
              isPersonal={isPersonal}
            />
            <EvalutionFeedback
              title={findText("Improvements")}
              highlightText={selectSection?.data?.example || ""}
            />
          </EvaluationWrapper>
        )}
        {/* {selected !== 4 ? (
          <EvaluationWrapper>
          
            <EvalutionFeedback
              hideWarning
              withBorder
              highlightText={
                "Technology has become an inseparable part of modern life, reshaping how we Technology has become an inseparable part of modern life. Essay seems to be a statement rather than an essay. It lacks depth,  context, and analysis, making it difficult to discern its relevance to  the topic Technology."
              }
            />
            <EvalutionFeedback
              title="Improvements"
              highlightText={
                "Technology has become an inseparable part of modern life, reshaping how we Technology has become an inseparable part of modern life. Essay seems to be a statement rather than an essay. It lacks depth,  context, and analysis, <span>making it difficult to discern its relevance to  the topi</span> c Technology. Technology has become an inseparable part of modern life, reshaping how we Technology has become an inseparable part of modern life. Essay seems to be a statement rather than an essay. It lacks depth,  context, and analysis, making it difficult to discern its relevance to  the topic Technology."
              }
            />
          </EvaluationWrapper>
         ) : (
         
         )} */}

        {selectSection?.id === "character" && (
          <EvaluationCharacters>
            <EvaluationCharactersItem>
              <div className="header">
                <GreenAIcon />
                <p>{selectSection?.data?.char_count || 0}</p>
              </div>
              <div className="content">
                <h3>{findText("Character count")}</h3>
                <p>
                  {findText("This is the number of characters in your essay")}
                </p>
              </div>
            </EvaluationCharactersItem>
            <EvaluationCharactersItem className="yellow">
              <div className="header">
                <YellowAIcon />
                <p>{selectSection?.data?.word_count || 0}</p>
              </div>
              <div className="content">
                <h3>{findText("Word count")}</h3>
                <p>{findText("This is the number of words in your essay")}</p>
              </div>
            </EvaluationCharactersItem>
          </EvaluationCharacters>
        )}
      </ModelContent>
    </ModelComtainer>
  );
};
export default Evaluation;
