import styles from "../../styles/pdf_gen/paramItem.module.scss";
import { ImCross } from "react-icons/im";
export default function ParamItem({
  exo,
  unSelect,
  setExo,
  onlyNumber = false,
}) {
  return (
    <div className={styles["item"]}>
      <div className={styles["name-container"]}>
        <ImCross onClick={unSelect}/>
        <p>{exo.name}</p>
      </div>
      <div className={styles["param-container"]}>
        {!onlyNumber && (
          <>
            <label>Nombre d'exercice</label>
            <input
              type="number"
              step={1}
              min={1}
              max={10}
              value={exo.numberOfExo}
              onChange={(e) => {
                if (
                  (parseInt(e.target.value) <= 10 &&
                    parseInt(e.target.value) >= 1) ||
                  e.target.value == ""
                ) {
                  setExo(exo.numberInExo, parseInt(e.target.value));
                } else if (isNaN(parseInt(e.target.value))) {
                  setExo(exo.numberInExo, exo.numberOfExo);
                } else if (parseInt(e.target.value) > 10) {
                  setExo(exo.numberInExo, 10);
                }
              }}
            />
          </>
        )}
        <label>Nombre dans l'exercice</label>
        <input
          type="number"
          step={1}
          min={5}
          max={30}
          value={exo.numberInExo}
          onChange={(e) => {
            if (
              (parseInt(e.target.value) <= 30 &&
                parseInt(e.target.value) >= 1) ||
              e.target.value == ""
            ) {
              setExo(parseInt(e.target.value), exo.numberOfExo);
            } else if (parseInt(e.target.value) > 30) {
              setExo(30, exo.numberOfExo);
            }
          }}
        />
      </div>
    </div>
  );
}