import AceEditor from "react-ace";
import React, { useEffect, useState } from "react";

import "ace-builds/src-min-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/snippets/python";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/snippets/javascript";
import "ace-builds/src-noconflict/theme-tomorrow_night_blue";
import { exoInstance } from "../../apis/exoInstance.instance.js";
import { useQuery } from "react-query";
import { editorOut } from "../../requests/requests.exos.js";
import styles from "../../styles/exos/Editor.module.scss";

import { VscDebugStart } from "react-icons/vsc";
import { parseClassName } from "../../utils/utils.js";
import { notificationService } from "../../services/notification.service.js";
function ConsoleComp({ content, step }) {
  return (
    <div
      className={parseClassName([
        styles["console"],
      ])}
    >
      <p className="margin-0 marginb-p1">
        Python 3.10.1 (main, Dec 29 2021, 10:45:39) -{" "}
        {step.name.replace(" ", "_")}.py
      </p>
      {content.out.length == 0 && content.error.length == 0 && (
        <p className="console-line margin-0">{">"}</p>
      )}
      {content.out.map((l) => {
        return (
          <p className={parseClassName(["console-line", "margin-0"])}>
            {">"} {l}
          </p>
        );
      })}
      {content.error.map((l) => {
        return (
          <p
            className={parseClassName([
              "console-line",
              "margin-0",
              styles["error_lines"],
            ])}
          >
            {">"} {l}
          </p>
        );
      })}
    </div>
  );
}
const Console = React.memo(ConsoleComp);

export default function CustomEditor({ ...props }) {
  const [enable, setEnable] = useState(false);
  const { isLoading, isFetching, data, refetch, remove } = useQuery(
    "editor",
    async () => await editorOut(props.value),
    {
      refetchOnWindowFocus: false,
      staleTime: 1000000,
      enabled: enable,
    }
  );
  useEffect(() => {
    return () => {
      remove();
    };
  }, []);
  
  return (
    <>
      <div className={styles["btn-container"]}>
        <button
          onClick={async () => {
            setEnable(true);
            refetch();
          }}
          className={parseClassName(["exo-btn", styles["run-btn"]])}
        >
          {!isLoading && !isFetching && (
            <>
              <VscDebugStart className={styles["run-icon"]} />
              Run
            </>
          )}
          {(isLoading || isFetching) && (
            <>
              <span
                className={parseClassName(["loader", styles["loader"]])}
              ></span>
            </>
          )}
        </button>
        <button
          className={parseClassName(["exo-btn", styles["btn"]])}
          onClick={(e) => {
            refetch().then((res) => {
              console.log('tes', res)
              if (res.data.error.length == 0) {
                props.validate(e);
              } else {
                notificationService.error('Erreur', 'Veuillez regler l\'erreur', {autoClose: true })
              }
            });
          }}
        >
          Valider
        </button>
        <button
          onClick={props.cancel}
          className={parseClassName(["cancel-btn", styles.btn])}
        >
          Annuler
        </button>
      </div>
      <div className={styles["full-editor"]}>
        <div className={styles["editor"]}>
          <div className={styles["onglet-container"]}>
            <div className={styles["onglet"]}>
              Python - {props.filename != null ? props.filename: 'main.py'}
            </div>
          </div>
          <AceEditor {...props} theme="tomorrow_night_blue" />{" "}
        </div>

        <div className={styles["console-container"]}>
          <div className={styles["onglet-container"]}>
            <div className={styles["onglet"]}>Console</div>
          </div>
          <Console
            content={
              isLoading || isFetching || !data
                ? { out: ["..."], error: [] }
                : data
            }
            step={props.step}
          />
        </div>
      </div>
    </>
  );
}