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";

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" />}

            <input
              type="file"
              onChange={async (e) => {
                let text = await e.target.files[0].text().then((res) => res);
                setModel({ filename: e.target.files[0].name, data: text });
              }}
            />
          </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}
            />
          )}
        </>
      )}
    </>
  );
}