Generateurv2/frontend/components/exos/modelInput.jsx

import dynamic from "next/dynamic";
import { useEffect, useState } from "react";
import { CODE_SEPARATOR, PYTHON_DEFAULT } from "../../utils/constant.js";
import styles from "../../styles/exos/ModelInput.module.scss";
import { parseClassName } from "../../utils/utils.js";

import { MdOutlineOpenInNew } from "react-icons/md";
import { RiErrorWarningFill } from "react-icons/ri";
import { FiUpload } from "react-icons/fi";
import { FaDownload } from "react-icons/fa";
import { getExoModelFile } from "../../requests/requests.exos.js";
let CustomEditor;

if (typeof window !== "undefined") {
  CustomEditor = dynamic(() => import("./Editor.jsx"));
}

export default function ModelInput({
  model,
  onChange,
  setModel,
  setFull,
  full,
  step,
  tempSpec,
}) {
  const [python, setPython] = useState("");
  useEffect(() => {
    if (full) {
      setPython(model.data ? model.data : PYTHON_DEFAULT);
    }
    return () => {
      setPython("");
    };
  }, [full]);

  return (
    <>
      {!full && (
        <div
          className={parseClassName([
            styles["model-input__full-container"],
            styles["exo-edit"],
          ])}
        >
          <div className={styles["input-container"]}>
            <button
              className={parseClassName([
                styles["open-btn"],
                styles["button-lang"],
                styles["button-lang-python"],
              ])}
              onClick={(e) => {
                e.preventDefault();
                //setActive(!active);
                setFull(true);
              }}
            >
              <MdOutlineOpenInNew />
              Ouvrir l'éditeur
            </button>
            {/* {python !== model.model && <RiErrorWarningFill className="red" />} */}
            <p>ou</p>
            <div className={styles["fileinput-container"]}>
              <input
                type="file"
                id="file"
                name="file"
                accept=".py"
                onChange={async (e) => {
                  let text = await e.target.files[0].text().then((res) => res);
                  var filename = e.target.files[0].name;
                  var splitting = filename.split(".");
                  if (splitting[splitting.length - 1] != "py") {
                    console.log("nope");
                  } else {
                    setModel({ filename: e.target.files[0].name, data: text });
                  }
                }}
                className={styles["inputfile"]}
              />
              <label htmlFor="file">Choisir un fichier</label>
              <div className={styles["filename"]}>
                {model.filename == "" || !model.filename
                  ? "..."
                  : model.filename}
                {model.download && <FaDownload onClick={() => {
                  getExoModelFile(step.id_code)
                }}/>}
              </div>
            </div>
          </div>
        </div>
      )}

      {full && (
        <>
          {CustomEditor && full && (
            <CustomEditor
              step={step}
              placeholder="Fonction main qui renvoie un un objet avec calcul = le calcul à afficher "
              mode="python"
              name="blah2"
              fontSize={14}
              //showPrintMargin={true}
              showGutter={true}
              highlightActiveLine={true}
              value={python}
              onChange={(e) => {
                setPython(e);
              }}
              setOptions={{
                showLineNumbers: true,
                tabSize: 2,
              }}
              //editorProps={{ $blockScrolling: true }}
              enableBasicAutocompletion={false}
              enableLiveAutocompletion={true}
              //enableSnippets={true}
              className="model_input-code_input"
              showPrintMargin={false}
              validate={(e) => {
                e.preventDefault();
                onChange &&
                  onChange({ data: python, filename: model.filename });

                setFull(false);
              }}
              cancel={() => {
                setFull(false);
                setPython(tempSpec.exo_model.data);
              }}
              filename={model.filename}
            />
          )}
        </>
      )}
    </>
  );
}