import { useEffect, useRef, useState } from "react";
import useFocus from "../../hooks/useFocus.hook.jsx";
import { csvGen } from "../../requests/requests.exos.js";
import styles from "../../styles/exos/ExoPrinterForm.module.scss";
import { parseClassName } from "../../utils/utils.js";
import StepExemple from "./StepExemple.jsx";
import StepOptions from "./StepOptions.jsx";

export default function ExoPrinterForm({ step }) {
  const [options, setOptions] = useState({
    pages: 5,
    serie: 10,
    name: "",
  });
  const pageChange = (num) => {
    setOptions({
      ...options,
      pages: num,
    });
  };
  const serieChange = (num) => {
    setOptions({
      ...options,
      serie: num,
    });
  };
  const ref = useRef();
  useEffect(() => {
    if (ref.current != null) ref.current.focus();
  }, []);
  return (
    <>
      <div className={styles["exo-input-container"]}>
        {" "}
        <input
          type="text"
          name="fich_name"
          className={"exo-input " /* (error.error == true && " input-error") */}
          placeholder="Nom du fichier..."
          value={options.name}
          onChange={(e) => {
            setOptions({ ...options, name: e.target.value });
          }}
          tabIndex="-1"
          ref={ref}
          onKeyUp={(e) => {
            if (e.code == "Enter") {
              csvGen(
                step.id_code,
                options.name !== "" ? options.name : "untitled"
              );
            }
          }}
          disabled={!step.isCsv}
        />
      </div>
      <div className={styles["option--ex"]}>
        <div>
          {step.exemple.data && (
            <p className="margint-p0 fontw-800">
              Exemples ({step.exemple.type && step.exemple.type})
            </p>
          )}
          <p className={"marginl-p3" + " marginb-p0 small-text " + styles.consigne}>{step.consigne}</p>
          {step.exemple.data &&
            step.exemple.data.slice(0, 3).map((ex, i) => {
              return (
                <p
                  key={i}
                  className={"marginl-p5" + " margint-p1 small-text " + styles.exemple}
                  title={ex.calcul}
                >
                  {ex.calcul}
                </p>
              );
            })}

          {step.exemple.data && <p className="marginl-p5 margint-p2">...</p>}
          {!step.exemple.data && <p>Exemples indisponibles</p>}
        </div>
      </div>

      <div className={styles["btn-container"]}>
        <button
          className={parseClassName([
            "exo-btn",
            !step.isCsv ? styles["btn-disabled"] : undefined,
          ])}
          onClick={(e) => {
            e.preventDefault;
            csvGen(
              step.id_code,
              options.name !== "" ? options.name : "untitled"
            );
          }}
          disabled={!step.isCsv}
        >
          {step.isCsv ? "Télécharger" : "Téléchargement indisponible"}
        </button>
      </div>
    </>
  );
}