/**
 * Composant de filtrage des indicateurs.
 *
 * @component
 * @param {object} props.appConfig - Contexte MobX
 * @param {object} props.filtres - State avec les filtres sélectionnés
 * @param {function} props.setFiltres - Fonction permettant de modifier les fitlres sélectionnés
 * @param {boolean} props.isSuiviPAMGestionnaire - Booléen permettant de savoir si l'on se trouver sur les indicateurs du PAM Gestionnaire
 */

 import React, { useEffect, useState } from 'react';
 import {
     CATEGORIES,
     DOMAINES,
     FILIERES,
     MILITAIRES_DU_RANG,
     NF,
     OFFICIERS_SUBALTERNES,
     OFFICIERS_SUPERIEURS,
     SOUS_OFFICIERS
 } from '../../constantes/constantes';
 import Select from 'react-select';
 import './Filtres.scss';
 
 function Filtres(props) {
     // Liste des catégories qu'il est possible de sélectionner
     const categorieOptions = [
         { value: 'MDR', label: MILITAIRES_DU_RANG },
         { value: 'SOFF', label: SOUS_OFFICIERS },
         { value: 'OFF', label: OFFICIERS_SUBALTERNES },
         { value: 'OGX', label: OFFICIERS_SUPERIEURS }
     ];
 
     // Liste des domaines qu'il est possible de sélectionner
     const domaineOptions = props.appConfig.donneesReference.domaines.map((d) => {
         return { value: d.id, label: d.code + ' (' + d.libelle + ')' };
     });
 
     // Liste de toutes les filières
     const filiereOptionsReference = props.appConfig.donneesReference.filieres.map((f) => {
         return { value: f.id, label: f.code + ' (' + f.libelle + ')' };
     });
 
     // Liste des filières qu'il est possible de sélectionner après avoir choisi un domaine
     const [filiereOptions, setFiliereOptions] = useState(undefined);
 
     // Liste des nf qu'il est possible de sélectionner
     const nfOptions = props.appConfig.donneesReference.NF.map((nf) => {
         return { value: nf.id, label: nf.code };
     });
 
     // Style à appliquer aux select
     const customStyles = {
         valueContainer: (provided) => {
             return {
                 ...provided,
                 maxHeight: '60px',
                 overflowY: 'auto'
             };
         }
     };
 
     // Fonction permettant de mettre à jour les filtres sélectionnés
     function changeFilters(newValue, typeFiltre) {
         const newValues = [];
         props.filtres.forEach((f) => newValues.push(f));
         switch (typeFiltre) {
             case CATEGORIES:
                 newValues[0] = newValue;
                 break;
             case DOMAINES:
                 newValues[1] = newValue;
                 break;
             case FILIERES:
                 newValues[2] = newValue;
                 break;
             case NF:
                 newValues[3] = newValue;
                 break;
         }
         props.setFiltres(newValues);
     }
 
     useEffect(() => {
         if (props.filtres[1].length > 0) {
             // Affiche seulement les options qui correspondent des domaines sélectionnés
             const tmpOptions = [];
             props.filtres[1].forEach((d) => {
                 const filieres = props.appConfig.donneesReference.filieres.filter((f) => d.value === f.domaineId);
                 filieres.forEach((f) => tmpOptions.push({ value: f.id, label: f.code + ' (' + f.libelle + ')' }));
             });
             setFiliereOptions(tmpOptions);
 
             // Met à jour les valeurs en fonction des domaines sélectionnés
             const tmpValues = props.filtres[2].filter((f) => tmpOptions.some((op) => op.value === f.value));
             changeFilters(tmpValues, FILIERES);
         } else {
             // Remet les filtres à 0 si aucun domaine sélectionné
             changeFilters([], FILIERES);
         }
     }, [props.filtres[1]]);
 
     return (
         <div className="Filtres">
             <h5>Catégorie(s)</h5>
             <Select
                 closeMenuOnSelect={false}
                 options={categorieOptions}
                 value={props.filtres[0]}
                 onChange={(newValue) => changeFilters(newValue, CATEGORIES)}
                 isMulti
                 placeholder="Sélectionner..."
                 noOptionsMessage={(option) => "Aucune catégorie correspondante n'a été trouvée"}
                 menuPlacement="top"
                 className="selectLeft"
                 styles={customStyles}
                 isDisabled={props.disabled}
             />
             {!props.isSuiviPAMGestionnaire && (
                 <>
                     <h5>Domaine(s)</h5>
                     <Select
                         closeMenuOnSelect={false}
                         options={domaineOptions}
                         value={props.filtres[1]}
                         onChange={(newValue) => changeFilters(newValue, DOMAINES)}
                         isMulti
                         placeholder="Sélectionner..."
                         noOptionsMessage={(option) => "Aucun domaine correspondant n'a été trouvé"}
                         menuPlacement="top"
                         className="selectLeft"
                         styles={customStyles}
                         isDisabled={props.disabled}
                     />
                 </>
             )}
             <h5>Filière(s)</h5>
             <Select
                 closeMenuOnSelect={false}
                 options={props.isSuiviPAMGestionnaire ? filiereOptionsReference : filiereOptions}
                 value={props.filtres[2]}
                 onChange={(newValue) => changeFilters(newValue, FILIERES)}
                 isMulti
                 placeholder="Sélectionner..."
                 noOptionsMessage={(option) => "Aucune filière correspondante n'a été trouvée"}
                 menuPlacement="top"
                 className="selectLeft"
                 styles={customStyles}
                 isDisabled={props.disabled || (props.isSuiviPAMGestionnaire ? false : props.filtres[1].length === 0)}
             />
             <h5>NF</h5>
             <Select
                 closeMenuOnSelect={false}
                 options={nfOptions}
                 value={props.filtres[3]}
                 onChange={(newValue) => changeFilters(newValue, NF)}
                 isMulti
                 placeholder="Sélectionner..."
                 noOptionsMessage={(option) => "Aucun NF correspondant n'a été trouvé"}
                 menuPlacement="top"
                 className="selectLeft"
                 styles={customStyles}
                 isDisabled={props.disabled}
             />
         </div>
     );
 }
 
 export default Filtres
 ;

