import React, { useState } from "react";
import {
  QuestionSection,
  MatchPairGrid,
  TitleAndSubtitle,
  MatchPairItem,
  PairPreviewContainer,
  ModalContainer,
} from "../style";
import MenuIcon from "../../../../assets/svg/menuIcon";
import classNames from "classnames";
import ButtonComponent from "../../../button";
import QuestionDropdown from "../components/questionDropdown";
import Response from "../components/response";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const MatchPair = ({ data, answerData, isPersonal }) => {
  const { findText } = useTranslation(wordStore);
  const [pairPreview, setPairPreview] = useState(null);
  const getMatchAndCorrectPair = () => {
    const responses = data?.question_data?.question_data;
    if (responses) {
      const questionList = Object.entries(responses || {});
      const answerResponses = answerData?.answer?.data?.responses;
      const formattedList = questionList?.map((item, index) => {
        const match = item?.[0];
        const correct = item?.[1];
        const responseValue = answerResponses?.[match]?.value;
        return {
          question: match,
          answer: responseValue,
          pair: correct,
          isCorrect: responseValue === correct,
        };
      });
      return formattedList;
    }
    return [];
  };
  const matchPairList = getMatchAndCorrectPair();
  return (
    <>
      {pairPreview && (
        <PairPreview value={pairPreview} onClose={() => setPairPreview(null)} />
      )}
      <QuestionSection>
        <QuestionDropdown>
          <>
            <li>
              <h3>{findText("Instruction")}</h3>
              <p>{data?.question_data?.instruction}</p>
            </li>
          </>
        </QuestionDropdown>
        {answerData &&
          !Object.values(answerData?.answer?.data?.responses || {})?.length >
            0 && <Response title="" isPersonal={isPersonal} />}
        <TitleAndSubtitle>
          <MatchPairGrid>
            <h3>{findText("Word/Sentence")}</h3>
            <h3>{findText("Student match")}</h3>
            <h3>{findText("Correct match")}</h3>
          </MatchPairGrid>
        </TitleAndSubtitle>
        {matchPairList?.map((item, index) => (
          <MatchPairGrid key={index}>
            <MatchPairItem>
              <p className="truncate-3">{item?.question}</p>
              <button onClick={() => setPairPreview(item?.question)}>
                <MenuIcon />
              </button>
            </MatchPairItem>

            <MatchPairItem
              className={classNames({
                "is-correct": item?.isCorrect && item?.answer,
                "is-incorrect": !item?.isCorrect,
              })}
            >
              <p className="truncate-3">{item?.answer}</p>
              {item?.answer && (
                <button onClick={() => setPairPreview(item?.answer)}>
                  <MenuIcon />
                </button>
              )}
            </MatchPairItem>

            <MatchPairItem>
              <p className="truncate-3">{item?.pair}</p>
              <button onClick={() => setPairPreview(item?.pair)}>
                <MenuIcon />
              </button>
            </MatchPairItem>
          </MatchPairGrid>
        ))}
      </QuestionSection>
    </>
  );
};
const PairPreview = ({ value, onClose }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <ModalContainer>
      <PairPreviewContainer>
        <div>
          <p>{value}</p>
        </div>
        <ButtonComponent text={findText("Close")} onClick={onClose} />
      </PairPreviewContainer>
    </ModalContainer>
  );
};
export default MatchPair;
