import { useEffect, useRef, useState } from "react";
import styles from "../../styles/room/input.module.scss";
import { parseClassName } from "../../utils/utils.js";
import Input from "../Input.jsx";
import { AiOutlineCheck, AiOutlineClose } from "react-icons/ai";

export default function CorrectionInput({
  inputData,
  idInput,
  idExo,
  idCalcul,
  correctionMenu,
  setCorrectionMenu,
}) {
  const [result, setResult] = useState({
    correction: inputData.correction,
    isCorrect: inputData.isCorrect,
  });
  const [fade, setFade] = useState(false);
  useEffect(() => {
    if (correctionMenu) {
      setFade(true)
    } else {
      setFade(false);
    }
  }, [correctionMenu]);
  return (
    <div className={styles['correctionInput-main-container']}>
      {correctionMenu && (
        <div
          className={styles["correction-menu"]}
          style={{ opacity: !fade ? 0 : 1 }}
        >
          <Input
            placeholder="Correction"
            onClick={(e) => {
              e.stopPropagation();
            }}
            type="text"
            value={result.correction}
            onChange={(e) => {
              setResult({
                correction: e.target.value,
                isCorrect: inputData.value == e.target.value,
              });
            }}
          />
          <div className={styles["icon-container"]}>
            <AiOutlineCheck
              title="Marquer comme juste"
              className={parseClassName([
                styles["icon"],
                styles["icon-valid"],
                !result.isCorrect ? styles["unactive"] : undefined,
              ])}
              onClick={(e) => {
                e.stopPropagation();
                setResult({ ...result, isCorrect: true });
              }}
            />
            <AiOutlineClose
              title="Marquer comme erroné"
              className={parseClassName([
                styles["icon"],
                styles["icon-invalid"],
                result.isCorrect ? styles["unactive"] : undefined,
              ])}
              onClick={(e) => {
                e.stopPropagation();

                setResult({ ...result, isCorrect: false });
              }}
            />{" "}
          </div>
        </div>
      )}
      <div
        /* ref={ref} */
        className={parseClassName([
          styles["input"],
          result.isCorrect ? styles["valid"] : styles["invalid"],
          ,
          result.isCorrect == null ? styles["withoutCorrection"] : undefined,
        ])}
        data-idexo={idExo}
        data-idinput={idInput}
        data-idcalcul={idCalcul}
        data-iscorrect={result.isCorrect}
        data-correction={result.correction}
        id="correctionInput"
        style={{ cursor: "pointer" }}
        onClick={setCorrectionMenu}
      >
        {inputData.value}{" "}
        {result.isCorrect == false &&
          result.correction != "" &&
          `-> ${result.correction}`}
      </div>
    </div>
  );
}