Generateurv2/frontend/components/pdf_gen/selectExo.jsx

import { createRef } from "react";
import { useState } from "react";
import { FiLink } from "react-icons/fi";
import useFilter from "../../hooks/useFilter.hook.jsx";
import styles from "../../styles/pdf_gen/selectExo.module.scss";
import { parseClassName } from "../../utils/utils.js";
import TagSelect from "../exos/TagSelect.jsx";
import Modal from "../Modal.jsx";
import Tag from "../Tag.jsx";
import ParamItem from "./ParamItem.jsx";
import TagContainer from "./tagContainer.jsx";
import { AiOutlineClose } from "react-icons/ai";


export default function SelectExo({
  exos,
  selected,
  select,
  setExos,
  emptyError,
  tagsData,
}) {
  const [active, setActive] = useState(false);
  const [search, setSearch] = useState("");
  const [exData, setExData] = useState([]);
  const [selectedOption, setSelectedOption] = useState(null);

  const [sortMode, setSortMode] = useState(false); // false == au moins 1 / true = tous

  useFilter(exos, selectedOption, search, setExData, sortMode);
  return (
    <>
      <div className={styles["exo-select"]}>
        <div className={styles["head"]}>
          <p>Ajouter exercices</p>
          <p className={styles.add} onClick={() => setActive(true)}>
            +
          </p>
        </div>
        <div className={styles["exos-selected"]}>
          {exos.filter((e) => {
            return selected.includes(e.id_code);
          }).length === 0 && (
            <>
              <p
                className={parseClassName([
                  styles["no-select"],
                  emptyError ? styles["error-empty"] : undefined,
                ])}
              >
                Aucun exercice selectionné
              </p>
              {emptyError == true && (
                <p className={parseClassName(["error-msg", styles.error])}>
                  Veuillez selectionner un exercice au minimum
                </p>
              )}
            </>
          )}
          {exos
            .filter((e) => {
              return selected.includes(e.id_code);
            })
            .sort((a, b) => {
              return selected.indexOf(a.id_code) - selected.indexOf(b.id_code);
            })
            .map((s, i) => {
              return (
                <ParamItem
                  exo={s}
                  unSelect={() => {
                    select([
                      ...selected.filter((ex) => {
                        return ex !== s.id_code;
                      }),
                    ]);
                  }}
                  setExo={(nbIn, nbOf) => {
                    /* setExos([
                      ...exos.filter((e) => {
                        return e.id_code !== s.id_code;
                      }), {...s, numberInExo:nbIn, numberOfExo: nbOf}
                    ]); */

                    setExos([
                      ...exos.slice(0, exos.indexOf(s)),
                      {
                        ...s,
                        numberInExo: nbIn,
                        numberOfExo: nbOf,
                      },
                      ...exos.slice(exos.indexOf(s) + 1),
                    ]);
                  }}
                  key={i}
                />
              );
            })}
        </div>
      </div>
      <Modal active={active} onClose={() => setActive(false)}>
        <div className={styles["modal-list-container"]}>
          <div className={styles["search-container"]}>
            <input
              type="text"
              className="exo-input"
              placeholder="Rechercher..."
              value={search}
              onChange={(e) => {
                setSearch(e.target.value);
              }}
            />
            <div style={{ display: "flex" }}>
              <TagSelect
                tags={tagsData}
                onChange={setSelectedOption}
                select={selectedOption}
              />
              <div
                onClick={() => {
                  setSortMode(!sortMode);
                }}
                title={
                  sortMode == true
                    ? "Doit avoir au moins tous les tags"
                    : "Doit avoir au moins un tag"
                }
                className={parseClassName([
                  styles["toggler-sort"],
                  sortMode
                    ? styles["toggler-active"]
                    : styles["toggler-inactive"],
                ])}
              >
                <FiLink />
              </div>
            </div>
          </div>
          <div>
            {exData.length == 0 && (
              <p className={styles["no-select"]}>Aucun résultat</p>
            )}
            {exData.map((d, i) => {
              return (
                <div
                  key={i}
                  onClick={() => {
                    if (!selected.includes(d.id_code)) {
                      select([...selected, d.id_code]);
                    } else {
                      select([
                        ...selected.filter((ex) => {
                          return ex !== d.id_code;
                        }),
                      ]);
                    }
                  }}
                  className={parseClassName([
                    selected.includes(d.id_code)
                      ? styles["selected"]
                      : undefined,
                    styles["item-in-modal"],
                    "pointer",
                  ])}
                >
                  <div className={styles["modal-name"]}>{d.name}</div>

                  {d.tags.length !== 0 && <TagContainer tags={d.tags} />}
                </div>
              );
            })}
          </div>
        </div>
        <div className={styles["icon-container"]}>
          <AiOutlineClose className={styles['icon']} onClick={()=>{setActive(false)}}/>
        </div>
      </Modal>
    </>
  );
}