import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
import 'ag-grid-enterprise';
import { observer } from 'mobx-react';
import React, { useContext, useEffect, useState } from 'react';
import { GrFormClose, VscArrowDown } from 'react-icons/all';
import { useLocation } from 'react-router-dom';
import Select from 'react-select';
import { toast } from 'react-toastify';
import { cssMenu } from '../../../constantes/classes-css';
import { ADMINISTRES, ADMINISTRES_POSTES, COMPETENCES_ADMINISTRES_MAX_ITEMS, COMPETENCES_POSTES_MAX_ITEMS, COMPETENCES_SEPARATEUR, DECISIONS, DEPARTEMENTS_SOUHAITES_MAX_ITEMS, MARQUES_SEPARATEUR, POSTES, PROFILS, ZONES_SEPARATEUR, ZONE_GEO_SHM_ADMINISTRES_MAX_ITEMS } from '../../../constantes/constantes';
import { getDecisionLabel } from '../../../helpers/i18n-helper';
import { debounce, getEmails, sendMail, getSVId } from '../../../helpers/misc-helpers';
import AGLocaleText from '../../../i18n/aggrid-locale-fr';
import i18n from '../../../i18n/i18n';
import AppConfigStore, { AppConfigContext } from '../../../stores/AppConfigStore';
import CalculsPopinEditor from '../../Commun/editors/calculs/CalculsPopinEditor';
import Message from '../../Commun/editors/calculs/Message';
import CompetencesPopinEditor from '../../Commun/editors/competences/CompetencesPopinEditor';
import DepartementsPopinEditor from '../../Commun/editors/departements/DepartementsPopinEditor';
import EipPopinEditor from '../../Commun/editors/eip/EipPopinEditor';
import MarquesPopinEditor from '../../Commun/editors/marques/MarquesPopinEditor';
import PosteSureffectifPopinEditor from '../../Commun/editors/posteSureffectif/PosteSureffectifPopinEditor';
import ZonesPopinEditor from '../../Commun/editors/zones/ZonesPopinEditor';
import InformationsFiltres from '../../Commun/InformationsFiltres';
import { commonAGGridColumnTypes } from '../../Commun/listes/commonAGGridColumnTypes';
import { commonAGGridFrameworkComponents } from '../../Commun/listes/commonAGGridFrameworkComponents';
import { getRefs } from '../../Commun/listes/commonAGGridFunctions';
import CustomAgGridReact from '../../Commun/listes/CustomAgGridReact';
import { hasCheckboxSelection, onCellValueChanged } from '../../Commun/listes/fonctionsEtCallbacksAgGrid';
import { getAvisAdministre, getNbAdministresEncoreAffectables, isPosteAffectable } from '../../Commun/listes/helpers/business-data-helpers';
import { ajouteElementsCommunsAdministreAMenuContextuel, ajouteElementsCommunsAMenuContextuel, ajouteElementsCommunsPosteAMenuContextuel, ensureVisibleFirstSelectedRow, supprimeSeparateursSurnumerairesMenuContextuel } from '../../Commun/listes/helpers/listes-ag-grid-helpers';
import './FeSelectPerimetre.scss';
import './ListePerimetre.scss';

/**
 * Composant permettant d'afficher une liste de postes et/ou d'administrés pour la vue "Mon périmètre".
 *
 * @component
 * @param {array} props.columnDefs - Les champs pour construire l'Ag Grid
 * @param {?Object[]} props.data - Les données pour remplir l'Ag Grid
 * @param {function} props.mutator - Fonction qui déclenche la revalidation instantanée
 * @param {number} props.nbItems - Le nombre total d'éléments dans la liste
 * @param {string} props.title - Le titre du tableau Ag Grid
 * @param {string} props.label - Le label associé au tableau
 * @param {boolean} props.isITD - Booléen pour savoir si on est sur le vivier ITD
 * @param {import('../../../jsdoc/types').ContexteAgGrid} props.context = contexte Ag Grid
 *
 * @example
 * return (
 * <ListePerimetre columnDefs={postesFields} data={rowData} nbItems={nbItems} title={'Postes'} itemLabel="poste" itemsLabel="poste"/>
 * )
 */
const ListePerimetre = observer((props) => {
    /** @type {AppConfigStore} */
    const appConfig = useContext(AppConfigContext);

    const gridId = 'LGPER_' + props.context.groupeType + '_' + (props.isITD ? 'MP' : 'ITD');

    /* -- Etat pour la liste et son filtrage */
    const [gridApi, setGridApi] = useState(undefined);
    const [filterChanged, setFilterChanged] = useState(false);
    const [nbFiltered, setNbFiltered] = useState(0);
    const [nbSelectedVisible, setNbSelectedVisible] = useState(0);
    const [isFiltered, setIsFiltered] = useState(false);
    const [isFilterReset, setIsFilterReset] = useState(false);

    /* --- Etats pour la modification groupée d'éléments de la liste */
    const [parametresEditeurCompetences, setParametresEditeurCompetences] = useState({editorOpened: false});
    const [parametresEditeurMarques, setParametresEditeurMarques] = useState({editorOpened: false});
    const [parametresEditeurEip, setParametresEditeurEip] = useState({editorOpened: false});
    const [parametresEditeurPostesSureffectif, setParametresEditeurPostesSureffectif] = useState({editorOpened: false});
    const [parametresEditeurPonderations, setParametresEditeurPonderations] = useState({editorOpened: false});
    const [parametresEditeurZones, setParametresEditeurZones] = useState({editorOpened: false});
    const [parametresEditeurCalculs, setParametresEditeurCalculs] = useState({editorOpened: false});
    const [parametresEditeurDepartements, setParametresEditeurDepartements] = useState({editorOpened: false});

    const setSelectedAGGridRow = (api) => {
        let selectedItems =
            props.context.groupeType === ADMINISTRES ? appConfig.selectedAdministresPerimetre : appConfig.selectedPostesPerimetreEtITD;
        const selectedIds = selectedItems ? selectedItems.map((e) => e.id) : [];
        let nbSelectedVisible = 0;
        api.forEachNodeAfterFilter(function (node) {
            const isSelected = selectedIds.includes(node?.data?.id);
            node.setSelected(isSelected);
            nbSelectedVisible += isSelected ? 1 : 0;
        });
        setNbSelectedVisible(nbSelectedVisible);
    };

    /**
     * Callback permettant d'effectuer des actions sur la ligne sélectionnée
     *
     * @void - Pour le moment rien du tout
     */
    const onSelectionChanged = debounce((e) => {
        const selectedRows = e.api.getSelectedRows();
        switch (props.context.groupeType) {
            case ADMINISTRES:
                appConfig.setSelectedAdministresPerimetre(selectedRows);
                break;
            case POSTES:
                appConfig.setSelectedPostesPerimetreEtITD(selectedRows);
                break;
        }
    }, 200);

    const showFirstSelectedRow = debounce((e) => {
        if (props.context.groupeType === ADMINISTRES && appConfig.hasSelectedAdministresPerimetre) {
            ensureVisibleFirstSelectedRow(appConfig.selectedAdministresPerimetre, e.api);
        } else if (props.context.groupeType === POSTES && appConfig.hasSelectedPostesPerimetreEtITD) {
            ensureVisibleFirstSelectedRow(appConfig.selectedPostesPerimetreEtITD, e.api);
        }
    }, 200);

    /**
     * Options de la grille
     * TODO factoriser les options communes à toutes les liste d'Ogure NG dans CustomAgGridReact
     * @type {[import('ag-grid-community').GridOptions]}
     */
    const [gridOptions] = useState({
        debug: false,
        groupHeaderHeight: 35,
        headerHeight: 40,
        enableBrowserTooltips: true,
        animateRows: true,
        columnTypes: commonAGGridColumnTypes,
        defaultColDef: {
            resizable: true,
            sortable: true,
            filter: true,
            editable: false,
            checkboxSelection: hasCheckboxSelection,
            headerCheckboxSelection: hasCheckboxSelection,
            headerCheckboxSelectionFilteredOnly: hasCheckboxSelection,
            enableRowGroup: true,
            //enablePivot: true,
            //enableValue: true,
            menuTabs: ['filterMenuTab', 'generalMenuTab']
        },
        defaultColGroupDef: {autoHeight: true},
        frameworkComponents: commonAGGridFrameworkComponents,
        //    headerName: props.title,
        localeText: AGLocaleText,
        onFilterChanged: () => setFilterChanged(true),
        onGridReady: (params) => {
            setGridApi(params.api);

            params.api.setSideBarVisible(true);
            params.api.closeToolPanel();

            setSelectedAGGridRow(params.api);
        },
        onFirstDataRendered: showFirstSelectedRow,
        // Nécessaire car onGridReady n'est pas *systématiquement* appelé quand ce composant est mis à jour ?!
        onComponentStateChanged: (e) => setSelectedAGGridRow(e.api),
        onCellValueChanged: (params) => {
            onCellValueChanged(params, params.context?.groupeType, appConfig);
            onSelectionChanged(params); // On force la MAJ de la sélection immédiatement pour qu'elle tienne compte des nouvelles valeurs
        },
        onSelectionChanged: onSelectionChanged,
        rowSelection: 'multiple',
        allowContextMenuWithControlKey: true,
        getContextMenuItems: (params) => getContextMenuItems(params),
        getRowNodeId: (data) => data.id,
        sideBar: {
            toolPanels: [
                {
                    id: 'columns',
                    labelDefault: 'Colonnes',
                    labelKey: 'columns',
                    iconKey: 'columns',
                    toolPanel: 'agColumnsToolPanel',
                    toolPanelParams: {
                        suppressRowGroups: false,
                        suppressValues: true,
                        suppressPivots: true,
                        suppressPivotMode: true,
                        suppressColumnFilter: false,
                        suppressColumnSelectAll: false,
                        suppressColumnExpandAll: false
                    }
                },
                {
                    id: 'filters',
                    labelDefault: 'Filtres',
                    labelKey: 'filters',
                    iconKey: 'filter',
                    toolPanel: 'agFiltersToolPanel',
                    toolPanelParams: {
                        suppressExpandAll: false,
                        suppressFilterSearch: false
                    }
                }
            ],
            position: 'right',
            defaultToolPanel: 'filters',
            hiddenByDefault: true
        },
        undoRedoCellEditing: false, //TODO attention si true car l'édition d'une cellule doit mettre à jour la base instantanément donc il faut gérer correctement le undo/redo
        undoRedoCellEditingLimit: 20,
        popupParent: document.querySelector('body'),
        context: props.context
    });

    useEffect(() => {
        if (filterChanged) {
            if (!isFilterReset) {
                if (Object.keys(gridApi.getFilterModel()).length === 0) {
                    setIsFiltered(false);
                } else {
                    setIsFiltered(true);
                    setNbFiltered(gridApi.getDisplayedRowCount());
                }
            } else {
                setIsFilterReset(false);
            }
        }
        setFilterChanged(false);
    }, [filterChanged]);


    useEffect(() => {
        if (isFiltered) {
            setIsFiltered(false);
            setIsFilterReset(false);
            setNbFiltered(0);
        }
    }, [props.data]);


    /**
     * Fonction permettant de définir les éléments du menu contextuel (clic droit)
     *
     * @param {CheckboxSelectionCallbackParams} params - Paramètres concernant la colonne
     * @return - Renvoie les items du menu contextuel
     */
    const getContextMenuItems = (params) => {
        if (params.node.group) return;

        const menuItems = [];

        const isGroupeAdministre = props.context.groupeType === ADMINISTRES;

        if (isGroupeAdministre) {
            // --- Eléments spécifiques aux administrés
            addContextMenuItemsAdministres(menuItems, params);
        } else {
            // --- Eléments spécifiques aux postes
            addContextMenuItemsPostes(menuItems, params);
        }

        ajouteElementsCommunsAMenuContextuel(menuItems);
        supprimeSeparateursSurnumerairesMenuContextuel(menuItems);

        if (menuItems.length == 1) {
            menuItems.push({
                name: `Aucune action possible sur ${isGroupeAdministre ? 'cet administré' : 'ce poste'}` +
                (props.isITD ? ' dans la vue "ITD"' : ''),
                disabled: true,
                cssClasses: ['']
            });
        }

        return menuItems;
    };

    /**
     * Ajoute aux éléments du menu ceux spécifiques à la liste des administrés.
     *
     * @param {Array.<Object>} menuItems - Liste des éléments de menus à compléter
     * @param {*} params - Paramètre d'appel à getContextMenuItems
     */
    function addContextMenuItemsAdministres(menuItems, params) {
        const administreDataNode = params.node?.data;
        const refs = getRefs(params);

        // Action : fiche détaillée administré (toujours proposée)
        ajouteElementsCommunsAdministreAMenuContextuel(menuItems, administreDataNode, appConfig, ['menuHasShortcuts']);

        // --- Actions sur les administrés appartenant à un des sous sous-vivier du gestionnaire

        //Actions : Prépositionner ou positionner l'administré du contexte avec le poste sélectionné (sauf si déjà fait)
        const idPosteAssocieAAdministre = administreDataNode.decision_posteId;
        const posteUniqueSelectionne =
            appConfig.hasSelectedPostesPerimetreEtITD && appConfig.selectedPostesPerimetreEtITD.length == 1
                ? appConfig.selectedPostesPerimetreEtITD[0]
                : null;
        console.log('posteUniqueSelectionne', posteUniqueSelectionne);

        const decisionAdministre = administreDataNode.decision_decision;

        const avisAdministre = getAvisAdministre(refs, administreDataNode.PAMEnCours_avis);

        // Actions si l'administré fait partie d'un des sous-viviers du gestionnaire
        if (appConfig.isSousVivierUtilisateurConnecte(administreDataNode.perimetre_sousVivier_id)) {
            // Actions s'il y a un poste sélectionné dans la vue mixte, qui est dans le même sous-vivier que l'administré
            if (
                appConfig.typeVuePerimetre == ADMINISTRES_POSTES && // On est dans la vue mixte
                posteUniqueSelectionne && // Il y a un et un seul poste sélectionné
                // !!posteUniqueSelectionne.perimetre_sousVivier_id.includes(administreDataNode.perimetre_sousVivier_id) && // Ce poste fait partie du même sous-vivier que l'administré
                avisAdministre?.affectationManuellePossible && // L'administré a un avis permettant l'affectation manuelle
                isPosteAffectable(refs, posteUniqueSelectionne) // Il est encore possible d'affecter un administré à ce poste
            ) {
                const decisionsPossibles = administreDataNode.decisions_possibles?.creation ?? [];
                if (Array.isArray(decisionsPossibles) && decisionsPossibles.length) {
                    const submenuDecisionItems = decisionsPossibles.reduce((items, d) => {
                        d && items.push({
                            name: i18n.decision?.[d]?.libelleAction ?? getDecisionLabel(d, refs),
                            cssClasses: [cssMenu.subMenu, cssMenu.svgIcon, 'decision', d],
                            action: () =>
                                appConfig.actionsMetierHelper.creeOuMAJDecisionAdministreAvecPoste(
                                    administreDataNode.id,
                                    posteUniqueSelectionne.id,
                                    d,
                                    administreDataNode.decision_decision || DECISIONS.AUCUNE,
                                ),
                                disabled: idPosteAssocieAAdministre == posteUniqueSelectionne.id && decisionAdministre === d
                        });
                        return items;
                    }, []);
                    if (submenuDecisionItems.length) {
                        menuItems.push({
                            name: `Lier cet administré avec le poste <em>« ${posteUniqueSelectionne.libelleGroupe} »</em>...`,
                            subMenu: submenuDecisionItems,
                            cssClasses: [cssMenu.svgIcon, 'changerDecision']
                        });
                    }
                }
            }

            //Action : annuler décision pour l'administré (sauf s'il n'y en a pas encore)
            if (idPosteAssocieAAdministre && decisionAdministre) {
                menuItems.push({
                    name: `Annuler la décision <em>« ${getDecisionLabel(decisionAdministre, refs)} »</em> de cet administré`,
                    action: () =>
                        appConfig.actionsMetierHelper.creeOuMAJDecisionAdministreAvecPoste(
                            administreDataNode.id,
                            idPosteAssocieAAdministre,
                            DECISIONS.AUCUNE,
                            decisionAdministre,
                        ),
                    cssClasses: [cssMenu.svgIcon, 'annulerDecision']
                });
            }

            // //Action : exclure l'administré du sous-vivier
            // menuItems.push('separator', {
            //     name: 'Exclure cet administré du sous-vivier <em>« ' + administreDataNode.perimetre_sousVivier_libelle + ' »</em>',
            //     action: () => appConfig.actionsMetierHelper.exclureAdministreDuSousVivier(administreDataNode),
            //     cssClasses: [cssMenu.svgIcon, 'exclureAdministreSV']
            // });

        }

        // --- Action unitaire sur un administré de la vue "Mon périmètre" (il faut qu'il soit selectionné)
        if (appConfig.hasSelectedAdministresPerimetre && appConfig.selectedAdministresPerimetre.length == 1) {
            const selectedAdministreId = appConfig.selectedAdministresPerimetre.map((a) => a.id);
            const selectedAdministreDom = appConfig.selectedAdministresPerimetre.map((a) => a.EIPFutur_domaine);
            const selectedAdministreFil = appConfig.selectedAdministresPerimetre.map((a) => a.EIPFutur_filiere);
            const selectedAdministreNf = appConfig.selectedAdministresPerimetre.map((a) => a.EIPFutur_NF);

            menuItems.push('separator', {
                name: 'Modification unitaire de l\'administré d\'id : ' + selectedAdministreId,
                cssClasses: [cssMenu.svgIcon, 'modificationMultiple'],
                subMenu: [
                    [PROFILS.FILIERE, PROFILS.BVT].includes(appConfig.profilSelectionne) ? {
                        name: 'EIP futur',
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'editEIPFutur'],
                        action: () => {
                            setParametresEditeurEip({
                                eip: {
                                    domaineId: selectedAdministreDom[0],
                                    filiereId: selectedAdministreFil[0],
                                    nfId: selectedAdministreNf[0],
                                },
                                editorOpened: true,
                                titre: "Modification unitaire d'EIP",
                                message: (
                                    <p>
                                        Sélectionnez l'EIP à affecter à l'administré
                                        d'id : {selectedAdministreId}.
                                        <br/> ⚠ Cela REMPLACERA l'EIP de cet administré par le nouvel EIP.
                                    </p>
                                )
                            });
                        }
                    } : '',
                ]
            })
        }
        // --- Actions groupée sur des administrés de la vue "Mon périmètre" (si au moins 2 administrés sélectionnés)
        if (appConfig.hasSelectedAdministresPerimetre && appConfig.selectedAdministresPerimetre.length > 1) {
            const nbAdministresSelectionnes = appConfig.selectedAdministresPerimetre.length;
            const selectedAdministresId = appConfig.selectedAdministresPerimetre.map((a) => a.id);

            menuItems.push('separator', {
                name: 'Modification multiple (' + nbAdministresSelectionnes + ' administrés sélectionnés)...',
                cssClasses: [cssMenu.svgIcon, 'modificationMultiple'],
                subMenu: [
                    [PROFILS.FILIERE, PROFILS.BVT].includes(appConfig.profilSelectionne) ? {
                        name: 'EIP futur',
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'editEIPFutur'],
                        action: () => {
                            setParametresEditeurEip({
                                eip: {},
                                editorOpened: true,
                                titre: "Modification groupée d'EIP",
                                message: (
                                    <p>
                                        Sélectionnez l'EIP à affecter aux {nbAdministresSelectionnes} administrés
                                        sélectionnés.
                                        <br/> ⚠ Cela REMPLACERA l'ensemble des EIP de ces administrés par le nouvel EIP.
                                    </p>
                                )
                            });
                        }
                    } : '',

                    [PROFILS.FILIERE, PROFILS.BVT].includes(appConfig.profilSelectionne) ? {
                        name: 'Avis',
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'editAvis'],
                        subMenu: refs.avisAdministre.map(avis => ({
                            name: avis.libelle,
                            cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'avis', 'administre', avis.code],
                            action: () => {
                                appConfig.managers.administres
                                    .updateMultiple(selectedAdministresId, {a_statut_pam: avis.code}, pam_id)
                                    .then((response) => {
                                        mutator(idList, 'a_id_sap', props.reqData, updateData);
                                        alert('Mise à jour réussie.');  // TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                    })
                                    .catch((reason) => {
                                        console.error(reason);
                                        toast.error(
                                            "Une erreur est survenue lors de l'enregistrement des avis. Veuillez contacter un administrateur.",
                                            {
                                                autoClose: false
                                            }
                                        );
                                    });
                            }
                        }))
                    } : '',

                    [PROFILS.FILIERE, PROFILS.BVT].includes(appConfig.profilSelectionne) ? {
                        name: 'Départements souhaités',
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'editDepartements'],
                            action: () => {
                                setParametresEditeurDepartements({
                                    typeDonnees: ADMINISTRES,
                                    competences: [],
                                    maxSelectedItems: DEPARTEMENTS_SOUHAITES_MAX_ITEMS,
                                    editorOpened: true,
                                    message: (
                                        <p>
                                            Sélectionnez les départements à affecter
                                            aux {nbAdministresSelectionnes} administrés sélectionnés.
                                            <br/> ⚠ Cela REMPLACERA l'ensemble des départements éventuellement déjà associées
                                            à ces administrés par les
                                            nouveaux départements sélectionnées.
                                        </p>
                                    )
                                });
                            }
                    } : '',

                    [PROFILS.FILIERE, PROFILS.BVT].includes(appConfig.profilSelectionne) ? {
                        name: 'Statut futur',
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon],
                        subMenu: refs.statutFutur.map(ref => ({
                            name: ref.libelle,
                            cssClasses: [cssMenu.subMenu, cssMenu.noIcon],
                            action: () => {
                                appConfig.managers.administres.updateMultiple(selectedAdministresId, {statut_futur: ref.code})
                                .then((response) => {
                                    mutator(idList, 'a_id_sap', props.reqData, updateData);
                                    alert('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                })
                                .catch((reason) => {
                                    console.error(reason);
                                    toast.error(
                                        "Une erreur est survenue lors de l'enregistrement des avis. Veuillez contacter un administrateur.",
                                        { autoClose: false }
                                    );
                                });
                            }
                        }))
                    } : '',

                    [PROFILS.FILIERE, PROFILS.BVT].includes(appConfig.profilSelectionne) ? {
                        name: 'Marques',
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'editMarques'],
                        action: () => {
                            setParametresEditeurMarques({
                                typeDonnees: ADMINISTRES,
                                marques: [],
                                editorOpened: true,
                                message: (
                                    <p>
                                        Sélectionnez les marques à affecter aux {nbAdministresSelectionnes} administrés
                                        sélectionnés.
                                        <br/> ⚠ Cela REMPLACERA l'ensemble des marques éventuellement déjà associées à
                                        ces administrés par les
                                        nouvelles marques sélectionnées.
                                    </p>
                                )
                            });
                        }
                    } : '',

                    [PROFILS.FILIERE, PROFILS.BVT].includes(appConfig.profilSelectionne) ? {
                        name: "Lancer l'algorithme sur les populations sélectionnées",
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'editCalculs'],
                        action: () => {
                            setParametresEditeurCalculs({
                                //typeDonnees: ADMINISTRES,
                                //decisions: ,
                                editorOpened: true,
                                message: (
                                    <p>
                                        <Message></Message>
                                    </p>
                                )
                            });
                        }
                    } : '',

                    [PROFILS.FILIERE, PROFILS.BVT].includes(appConfig.profilSelectionne) ? {
                        name: 'Compétences',
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'editCompetences'],
                        action: () => {
                            setParametresEditeurCompetences({
                                typeDonnees: ADMINISTRES,
                                competences: [],
                                maxSelectedItems: COMPETENCES_ADMINISTRES_MAX_ITEMS,
                                editorOpened: true,
                                message: (
                                    <p>
                                        Sélectionnez les compétences à affecter
                                        aux {nbAdministresSelectionnes} administrés sélectionnés.
                                        <br/> ⚠ Cela REMPLACERA l'ensemble des compétences éventuellement déjà associées
                                        à ces administrés par les
                                        nouvelles compétences sélectionnées.
                                    </p>
                                )
                            });
                        }
                    } : '',

                    [PROFILS.FILIERE, PROFILS.BVT].includes(appConfig.profilSelectionne) ? {
                        name: 'Zones géographiques SHM',
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'editCompetences'],
                        action: () => {
                            setParametresEditeurZones({
                                typeDonnees: ADMINISTRES,
                                competences: [],
                                maxSelectedItems: ZONE_GEO_SHM_ADMINISTRES_MAX_ITEMS,
                                editorOpened: true,
                                message: (
                                    <p>
                                        Sélectionnez les zones à affecter
                                        aux {nbAdministresSelectionnes} administrés sélectionnés.
                                        <br/> ⚠ Cela REMPLACERA l'ensemble des compétences éventuellement déjà associées
                                        à ces administrés par les
                                        nouvelles compétences sélectionnées.
                                    </p>
                                )
                            });
                        }
                    } : ''
                ]
            });
        }
    }

    /**
     * Ajoute aux éléments du menu ceux spécifiques à la liste des postes.
     *
     * @param {Array.<Object>} menuItems - Liste des éléments de menus à compléter
     * @param {*} params - Paramètre d'appel à getContextMenuItems
     */
    function addContextMenuItemsPostes(menuItems, params) {
        const posteDataNode = params.node?.data;

        ajouteElementsCommunsPosteAMenuContextuel(menuItems, posteDataNode, appConfig, ['menuHasShortcuts']);

        // --- Actions sur les postes appartenant à un des sous sous-vivier du gestionnaire

        //Actions : Prépositionner ou positionner le poste du contexte avec l'administré sélectionné (sauf si déjà fait)
        const submenuDecisionItems = [];
        const idAdministreAssocieAPoste = posteDataNode.decision_administreId;

        const nbAdministresEncoreAffectablesAPoste = getNbAdministresEncoreAffectables(appConfig.donneesReference, posteDataNode);

        //TODO gérer la liaison avec plusieurs administrés à la fois (au plus : nbAdministresEncoreAffectablesAPoste)
        const administreUniqueSelectionne =
            appConfig.hasSelectedAdministresPerimetre && appConfig.selectedAdministresPerimetre.length == 1
                ? appConfig.selectedAdministresPerimetre[0]
                : null;
        console.log('administreUniqueSelectionne', administreUniqueSelectionne);

        const avisAdministreSelectionne = administreUniqueSelectionne
            ? getAvisAdministre(appConfig.donneesReference, administreUniqueSelectionne.PAMEnCours_avis)
            : null;

        // Actions si le poste fait partie d'un des sous-viviers du gestionnaire
        if (appConfig.isPosteSousVivierUtilisateurConnecte(posteDataNode.perimetre_sousVivier_id)) {
            // Actions s'il y a un administré sélectionné dans la vue mixte, qui est dans le même sous-vivier que le poste
            if (
                appConfig.typeVuePerimetre == ADMINISTRES_POSTES && // On est dans la vue mixte
                administreUniqueSelectionne && // Il y a un et un seul administré sélectionné
                !!posteDataNode.perimetre_sousVivier_id.includes(administreUniqueSelectionne.perimetre_sousVivier_id) && // Cet administré fait partie du même sous-vivier que le poste
                nbAdministresEncoreAffectablesAPoste >= 1 && // Il est encore possible d'affecter un administré à ce poste
                avisAdministreSelectionne &&
                avisAdministreSelectionne.affectationManuellePossible // L'administré a un avis permettant l'affectation manuelle
            ) {
                // TODO moins de choix
                appConfig.donneesReference.decisionsById.forEach((_, decision) => {
                    submenuDecisionItems.push({
                        name: i18n.decision?.[decision]?.libelleAction ?? decision,
                        cssClasses: [cssMenu.subMenu, cssMenu.svgIcon, 'decision', decision],
                        action: () =>
                            appConfig.actionsMetierHelper.creeOuMAJDecisionAdministreAvecPoste(
                                administreUniqueSelectionne.id,
                                posteDataNode.id,
                                decision,
                                posteDataNode.decision_decision || DECISIONS.AUCUNE,
                            )
                        //disabled: idAdministreAssocieAPoste == administreUniqueSelectionne.id
                    });
                })

                if (submenuDecisionItems.length) {
                    menuItems.push({
                        name: "Lier ce poste avec l'administré <em>« " + administreUniqueSelectionne.identite_grade_nom_prenom + ' »</em>...',
                        subMenu: submenuDecisionItems,
                        cssClasses: [cssMenu.svgIcon, 'changerDecision']
                    });
                }
            }

            //Action : ajout du poste a un autre sous-vivier (gestionnaires BVT)
            if (appConfig.profilSelectionne == PROFILS.BVT) {
                menuItems.push(
                    'separator',
                    {
                        name: 'Dupliquer le poste <em>« ' + posteDataNode.id + ' »</em> dans le sous-vivier :',
                        subMenu: appConfig.donneesReference.sousViviers.map(ref => ({
                            name: ref.sv_libelle,
                            cssClasses: ['subMenu', 'noIcon'],
                            action: () => appConfig.actionsMetierHelper.ajoutPosteAuSousVivier(posteDataNode.id,ref.sv_id),
                        })),
                        cssClasses: [cssMenu.svgIcon, 'exclurePosteSV']
                    }
                );
            }
        }

        // Actions si le poste fait partie d'une des formation-emplois du gestionnaire
        if (appConfig.isPosteFormationEmploiUtilisateurConnecte(posteDataNode.perimetre_formationEmploi_id)) {
            if (appConfig.profilSelectionne === PROFILS.PCP) {
                
                const selectedPosteDepartement   = appConfig.selectedPostesPerimetreEtITD.map((p) => p.organisme_departement);
                const selectedPosteCodeFe        = appConfig.selectedPostesPerimetreEtITD.map((p) => p.organisme_FE);
                const selectedPosteLieu          = appConfig.selectedPostesPerimetreEtITD.map((p) => p.organisme_lieu);
                const selectedPosteZoneDeDefense = appConfig.selectedPostesPerimetreEtITD.map((p) => p.organisme_zone_defense);
                const selectedPosteCodeFeMere    = appConfig.selectedPostesPerimetreEtITD.map((p) => p.organisme_codeFeMere);
                const selectedPosteEtr           = appConfig.selectedPostesPerimetreEtITD.map((p) => p.poste_ETR);

                //ajouter un booléen qui indique si poste en sureff ou pas (récup la valeur e la colonne info REO)
                const isPosteSureffectif         = true ? appConfig.selectedPostesPerimetreEtITD.map((p) => p.organisme_infoReo.includes("SUREFF")) : false;

                //Action : ajout du poste au sous-vivier BVT (pameurs BMOB)
                menuItems.push(
                    'separator',
                    {
                        name: 'Dupliquer le poste <em>« ' + posteDataNode.id + ' »</em> dans la vue BVT',
                        action: () => appConfig.actionsMetierHelper.ajoutPosteAuSousVivier(posteDataNode.id, 'BVT'),
                        cssClasses: [cssMenu.svgIcon, 'ajoutPosteBVT']
                    }
                );
                //Action : ajout du poste a un autre sous-vivier (pameur BMOB)
                menuItems.push(
                    'separator',
                    {
                        name: 'Dupliquer le poste <em>« ' + posteDataNode.id + ' »</em> dans le sous-vivier :',
                        subMenu: appConfig.donneesReference.sousViviers.map(ref => ({
                            name: ref.sv_libelle,
                            cssClasses: ['subMenu', 'noIcon'],
                            action: () => appConfig.actionsMetierHelper.ajoutPosteAuSousVivier(posteDataNode.id, ref.sv_id),
                        })),
                        cssClasses: [cssMenu.svgIcon, 'exclurePosteSV']
                    }
                );
                menuItems.push(
                    'separator',
                    {
                        name: 'Dupliquer le poste <em>« ' + posteDataNode.id + ' »</em> pour l\'affecter en sureffectif',
                        action: () => {
                            setParametresEditeurPostesSureffectif({
                                infos: {
                                    departement: selectedPosteDepartement[0], 
                                    codeFe: selectedPosteCodeFe[0], 
                                    lieu: selectedPosteLieu[0], 
                                    zoneDeDefense: selectedPosteZoneDeDefense[0], 
                                    codeFeMere: selectedPosteCodeFeMere[0], 
                                    etr : selectedPosteEtr[0],
                                    pam: pam_id,
                                },
                                editorOpened: true,
                                titre: "Modification du poste en sureffectif",
                                message: (
                                    <p>
                                        Sélectionnez les informations à affecter au poste d'id : {posteDataNode.id}.
                                        <br/> ⚠ Une fois validé, vous ne pourrez plus modifier ces informations.
                                        <br/> Il faudra supprimer le poste en sureffectif et le créer à nouveau.
                                    </p>
                                )
                            });
                        },
                        cssClasses: [cssMenu.svgIcon, 'modifPosteSureff'],
                    }
                );
            if (isPosteSureffectif[0] === true){
                const idPosteSureffectif = appConfig.selectedPostesPerimetreEtITD.map((p) => p.id);
                const data ={supression:null}
                menuItems.push({
                    name: `Supprimer le poste en sureffectif`,
                    action: () => {
                        let msgConfirmation =
                        "Confirmez-vous la suppression du poste d\'id :\n    " +
                        idPosteSureffectif;

                        if (!window.confirm(msgConfirmation)) {
                            toast.info('Opération annulée.');
                        }
                        else { 
                        appConfig.managers.postes
                        .updateMultiple(idPosteSureffectif, data ,pam_id)
                        .then((response) => {
                            mutator(idList, 'p_id', props.reqData, updateData);
                            alert("Le poste en sureffectif d'id « " +
                                idPosteSureffectif + " de l'année " + pam_id +
                                ' » a été supprimé avec succès.'
                            );
                        })
                    }},
                    cssClasses: [cssMenu.svgIcon, 'supprimerPoste']
                });            
                }
            }

        }


        // --- Actions groupée sur des postes de la vue "Mon périmètre" (si au moins 2 postes sélectionnés)
        if (appConfig.hasSelectedPostesPerimetreEtITD && appConfig.selectedPostesPerimetreEtITD.length > 1) {
            const nbPostesSelectionnes = appConfig.selectedPostesPerimetreEtITD.length;
            const selectedPostesId = appConfig.selectedPostesPerimetreEtITD.map((a) => a.id);
            const pam_id = appConfig.PAMSelectionne;

            menuItems.push('separator', {
                name: 'Modification multiple (' + nbPostesSelectionnes + ' postes sélectionnés)...',
                cssClasses: [cssMenu.svgIcon, 'modificationMultiple'],
                subMenu: [
                    /*
                    {
                        name: 'Notes',
                        cssClasses: [cssMenu.svgIcon, 'editNotes'],
                        action: () => {

                        }
                    },
                    */
                    // {
                    //     name: 'Avis',
                    //     cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'editAvis'],
                    //     subMenu: appConfig.donneesReference.avisPoste.map((avis, i) => ({
                    //         name: avis.libelle,
                    //         cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'avis', 'poste', avis.code],
                    //         action: () => {
                    //             appConfig.managers.postes
                    //                 .updateMultiple(selectedPostesId, {p_statut_pam: avis.code})
                    //                 .then((response) => {
                    //                     alert('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                    //                 })
                    //                 .catch((reason) => {
                    //                     console.error(reason);
                    //                     toast.error(
                    //                         "Une erreur est survenue lors de l'enregistrement des avis. Veuillez contacter un administrateur.",
                    //                         {
                    //                             autoClose: false
                    //                         }
                    //                     );
                    //                 });
                    //         }
                    //     }))
                    // },

                    !props.isITD && (appConfig.profilSelectionne === PROFILS.PCP) ? {
                        name: 'CIAT',
                        cssClasses: ['subMenu', 'noIcon'],
                        subMenu: appConfig.donneesReference.CIAT.map(ref => ({
                            name: ref.libelle,
                            cssClasses: ['subMenu', 'noIcon'],
                            action: () => {
                                appConfig.managers.postes.updateMultiple(selectedPostesId, {p_ciat: ref.id})
                                .then((response) => {
                                    mutator(idList, 'p_id', props.reqData, updateData);
                                    alert('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                })
                                .catch((reason) => {
                                    console.error(reason);
                                    toast.error(
                                        "Une erreur est survenue lors de l'enregistrement de l'attribut poste CIAT. Veuillez contacter un administrateur.",
                                        { autoClose: false }
                                    );
                                });
                            }
                        }))
                    } : '',

                    !props.isITD && (appConfig.profilSelectionne === PROFILS.PCP) ? {
                        name: 'PPE / SHM / ITD',
                        cssClasses: ['subMenu', 'noIcon'],
                        subMenu: appConfig.donneesReference.Specifique.map(ref => ({
                            name: ref.code,
                            cssClasses: ['subMenu', 'noIcon'],
                            action: () => {
                                ref.code == 'ITD' ? appConfig.managers.postes.updateMultiple(selectedPostesId, {p_specifique: ref.code, p_itd_affecte: false})
                                .then((response) => {
                                    mutator(idList, 'p_id', props.reqData, updateData);
                                    alert('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                })
                                .catch((reason) => {
                                    console.error(reason);
                                    toast.error(
                                        "Une erreur est survenue lors de l'enregistrement de l'attribut poste specifique. Veuillez contacter un administrateur.",
                                        { autoClose: false }
                                    );
                                }) :
                                appConfig.managers.postes.updateMultiple(selectedPostesId, {p_specifique: ref.code})
                                .then((response) => {
                                    mutator(idList, 'p_id', props.reqData, updateData);
                                    alert('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                })
                                .catch((reason) => {
                                    console.error(reason);
                                    toast.error(
                                        "Une erreur est survenue lors de l'enregistrement de l'attribut poste specifique. Veuillez contacter un administrateur.",
                                        { autoClose: false }
                                    );
                                });
                            }
                        }))
                    } : '',

                    !props.isITD && (appConfig.profilSelectionne === PROFILS.PCP) ? {
                        name: 'Marques',
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'editMarques'],
                        action: () => {
                            setParametresEditeurMarques({
                                typeDonnees: POSTES,
                                marques: [],
                                editorOpened: true,
                                message: (
                                    <p>
                                        Sélectionnez les marques à affecter aux {nbPostesSelectionnes} postes
                                        sélectionnés.
                                        <br/> ⚠ Cela REMPLACERA l'ensemble des marques éventuellement déjà associées à
                                        ces postes par les nouvelles
                                        marques sélectionnées.
                                    </p>
                                )
                            });
                        }
                    } : '',

                    !props.isITD && (appConfig.profilSelectionne === PROFILS.PCP) ? {
                        name: 'Compétences',
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'editCompetences'],
                        action: () => {
                            setParametresEditeurCompetences({
                                typeDonnees: POSTES,
                                competences: [],
                                maxSelectedItems: COMPETENCES_POSTES_MAX_ITEMS,
                                editorOpened: true,
                                message: (
                                    <p>
                                        Sélectionnez les compétences à affecter aux {nbPostesSelectionnes} postes
                                        sélectionnés.
                                        <br/> ⚠ Cela REMPLACERA l'ensemble des compétences éventuellement déjà associées
                                        à ces postes par les
                                        nouvelles compétences sélectionnées.
                                    </p>
                                )
                            });
                        }
                    } : '',

                    !props.isITD && (appConfig.profilSelectionne === PROFILS.PCP) ? {
                        name: 'Priorité du poste DRHAT',
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon],
                        subMenu: appConfig.donneesReference.avisPoste.map(ref => ({
                            name: ref.libelle,
                            cssClasses: [cssMenu.subMenu, cssMenu.noIcon],
                            action: () => {
                                appConfig.managers.postes.updateMultiple(selectedPostesId, {p_avis: ref.code}, pam_id)
                                .then((response) => {
                                    mutator(idList, 'p_id', props.reqData, updateData);
                                    alert('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                })
                                .catch((reason) => {
                                    console.error(reason);
                                    toast.error(
                                        "Une erreur est survenue lors de l'enregistrement des avis. Veuillez contacter un administrateur.",
                                        { autoClose: false }
                                    );
                                });
                            }
                        }))
                    } : '',

                    !props.isITD && (appConfig.profilSelectionne === PROFILS.PCP) ? {
                        name: ' Priorité du poste pour la FE',
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon],
                        subMenu: appConfig.donneesReference.avisPoste.map(ref => ({
                            name: ref.libelle,
                            cssClasses: [cssMenu.subMenu, cssMenu.noIcon],
                            action: () => {
                                appConfig.managers.postes.updateMultiple(selectedPostesId, {p_avis_fe: ref.code, p_avis:ref.code}, pam_id)
                                .then((response) => {
                                    mutator(idList, 'p_id', props.reqData, updateData);
                                    alert('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                })
                                .catch((reason) => {
                                    console.error(reason);
                                    toast.error(
                                        "Une erreur est survenue lors de l'enregistrement des avis. Veuillez contacter un administrateur.",
                                        { autoClose: false }
                                    );
                                });
                            }
                        }))
                    }: '',

                    !props.isITD && (appConfig.profilSelectionne === PROFILS.PCP) ? {
                        name: 'Direct/Commissionné',
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon],
                        subMenu: appConfig.donneesReference.directCommissionne.map(ref => ({
                            name: ref.libelle,
                            cssClasses: [cssMenu.subMenu, cssMenu.noIcon],
                            action: () => {
                                appConfig.managers.postes.updateMultiple(selectedPostesId, {p_direct_commissionne: ref.id}, pam_id)
                                .then((response) => {
                                    mutator(idList, 'p_id', props.reqData, updateData);
                                    alert('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                })
                                .catch((reason) => {
                                    console.error(reason);
                                    toast.error(
                                        "Une erreur est survenue lors de l'enregistrement du champs. Veuillez contacter un administrateur.",
                                        { autoClose: false }
                                    );
                                });
                            }
                        }))
                    } : '',

                    !props.isITD ? {
                        name: "Lancer l'algorithme sur les population sélectionnées",
                        cssClasses: [cssMenu.subMenu, cssMenu.noIcon, 'editCalculs'],
                        action: () => {
                            setParametresEditeurCalculs({
                                //typeDonnees: POSTES,
                                editorOpened: true,
                                message: (
                                    <p>
                                        <Message></Message>
                                    </p>
                                )
                            });
                        }
                    } : '',


                    props.isITD && (appConfig.profilSelectionne === PROFILS.ITD) ? {
                        name: 'Cellule associé',
                        cssClasses: ['subMenu', 'noIcon'],
                        subMenu: appConfig.donneesReference.RefSvFils.map(ref => ({
                            name: ref.ref_sv_fil_code,
                            cssClasses: ['subMenu', 'noIcon'],
                            action: () => {
                                appConfig.managers.postes.updateMultiple(selectedPostesId, {p_itd_cellule: ref.ref_sv_fil_code, p_itd_affecte: true})
                                .then((response) => {
                                    mutator(idList, 'p_id', props.reqData, updateData);
                                    response.data.info ? toast.info(response.data.info) : toast.success('Mise à jour réussie.');
                                     //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                })
                                .catch((reason) => {
                                    console.error(reason);
                                    toast.error(
                                        "Il n'y a pas de sous_viviers enregistrés dans l'application pour la cellule choisie.",
                                        { autoClose: false }
                                    );
                                });
                            }
                        }))
                    } : '',

                ]
            });
        }
        // --- Actions groupée sur des postes de la vue "ITD" (si au moins 2 postes sélectionnés)
        // if (appConfig.hasSelectedPostesPerimetreEtITD && appConfig.selectedPostesPerimetreEtITD.length > 1 && props.isITD) {
        //     const nbPostesSelectionnes = appConfig.selectedPostesPerimetreEtITD.length;
        //     const selectedPostesId = appConfig.selectedPostesPerimetreEtITD.map((a) => a.id);

        //     menuItems.push('separator', {
        //         name: 'Modification multiple (' + nbPostesSelectionnes + ' postes sélectionnés)...',
        //         cssClasses: ['svgIcon', 'modificationMultiple'],
        //         subMenu: [
        //             {
        //                 name: 'Cellule associé',
        //                 cssClasses: ['subMenu', 'noIcon'],
        //                 subMenu: appConfig.donneesReference.ITDCelluleassociee.map(ref => ({
        //                     name: ref.libelle,
        //                     cssClasses: ['subMenu', 'noIcon'],
        //                     action: () => {
        //                         appConfig.managers.postes.updateMultiple(selectedPostesId, {p_ITD_cellule: ref.id})
        //                         .then((response) => {
        //                             alert('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
        //                         })
        //                         .catch((reason) => {
        //                             console.error(reason);
        //                             toast.error(
        //                                 "Une erreur est survenue lors de l'enregistrement des cellule associées. Veuillez contacter un administrateur.",
        //                                 { autoClose: false }
        //                             );
        //                         });
        //                     }
        //                 }))
        //             }
        //         ]
        //     });
        // }
    }

    const mutator = (keyList, key, reqData, updateData) => {
        // console.log('reqdata',props.reqData,'-----',reqData);
        // console.log('keylist',keyList);
        // console.log('key',reqData.map((r)=> (keyList.includes(r[key]) ? { ...r, ...updateData } : r)));
        // // FIXME: Refresh la données immédiatement en implémentant le mutate de SWRInfinite : https://github.com/vercel/swr/issues/908
        // console.log('updatedata',updateData)
        // let newData = {
        //     results: props.reqData,//.map((r) => (keyList.includes(r[key]) ? { ...r, ...updateData } : r)),
        //     count: props.reqData.length
        // };
        // console.log('newdata',newData)
        // props.mutator(newData);
        // props.mutator()
        //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
        // console.log(newData);
    };

    const feSelectStyles = {
        control: (provided, state) => ({
            ...provided,
            minHeight: '25px',
            height: '25px',
            boxShadow: state.isFocused ? null : null
        }),

        valueContainer: (provided, state) => ({
            ...provided,
            height: '25px',
            padding: '0 6px'
        }),

        input: (provided, state) => ({
            ...provided,
            margin: '0px'
        }),
        indicatorSeparator: (state) => ({
            display: 'none'
        }),
        indicatorsContainer: (provided, state) => ({
            ...provided,
            height: '25px'
        }),
        dropdownIndicator: (styles) => ({
            ...styles,
            paddingTop: 5,
            paddingBottom: 5
        }),
        clearIndicator: (styles) => ({
            ...styles,
            paddingTop: 5,
            paddingBottom: 5
        })
    };

    const location = useLocation();
    const isPerimetre = location.pathname.includes('Perimetre'); // booléen pour savoir si on affiche ou non la sélection de FE

    // Liste des FEs qu'il est possible de sélectionner
    const [feOptions, setFeOptions] = useState([]);

    // Données filtrées par FE
    const [dataPostesFE, setDataPostesFE] = useState(undefined);

    //Persistance du filtre FE
    // const [fe, setFE] = useState(null);

    // useEffect(()=>{
    //     const data = localStorage.getItem("filtre-FE");
    //     if (data) {
    //         setFE(JSON.parse(data));
    //     }
    //   }, []);

    // useEffect(()=> {
    //     localStorage.setItem("filtre-FE", JSON.stringify(fe));
    //     if (appConfig.profilSelectionne === PROFILS.FILIERE) {
    //         appConfig.setFeSelected(fe);
    //     }
    //     else {
    //         appConfig.setFeSelected(null);
    //     }
    // },[fe])

    //fin de la persitence des filtres

    useEffect(() => {
        setFeOptions(
            appConfig.feSousVivierSelectionne.map((val) => ({
                value: val.fe_mere_credo,
                label: val.fe_mere_credo + (val.fe_mere_la ? ` (${val.fe_mere_la})` : '')
            }))
        );
    }, [appConfig.feSousVivierSelectionne]);

    useEffect(() => {
        if (appConfig.feSelected && props.data?.length) {
            const newData = props.data.filter((d) => d.organisme_codeFeMere === appConfig.feSelected.value);
            setDataPostesFE(newData);
        } else {
            setDataPostesFE(undefined);
        }
    }, [appConfig.feSelected, props.data]);

    const pam_id = appConfig.PAMSelectionne;
    let updateData, idList;
    return (
        <div className="flex-grow-1 flex-shrink-1 w-100">
            <div className="container-fluid h-100 py-1">
                <div className="ag-theme-balham" style={{height: 'calc(100% - 2em)'}}>
                    <div className={'d-flex flex-row align-items-center px-0 d-inline'}>
                        <h3 className="pr-4" style={{fontSize: '1.2rem', marginBottom: '0'}}>
                            {props.title}
                        </h3>
                        {props.data && (
                            <>
                                {isPerimetre && (
                                    <InformationsFiltres
                                        nbItems={
                                            props.context.groupeType === POSTES ? (dataPostesFE ? dataPostesFE.length : props.nbItems) : props.nbItems
                                        }
                                        itemLabel={props.itemLabel}
                                        itemsLabel={props.itemsLabel}
                                        nbFiltered={nbFiltered}
                                        isFiltered={isFiltered}
                                        setIsFilterReset={setIsFilterReset}
                                        setIsFiltered={setIsFiltered}
                                        nbSelected={
                                            props.context.groupeType === ADMINISTRES
                                                ? appConfig.selectedAdministresPerimetre.length
                                                : appConfig.selectedPostesPerimetreEtITD.length
                                        }
                                        nbSelectedVisible={nbSelectedVisible}
                                        gridApi={gridApi}
                                        isLoadingData={props.isLoadingData}
                                    />
                                )}
                                {props.context.groupeType === POSTES && isPerimetre && appConfig.profilSelectionne === PROFILS.FILIERE && (
                                    <>
                                        <div className="FeSelectPerimetre">
                                            <Select
                                                options={feOptions}
                                                value={appConfig.feSelected}
                                                onChange={(newValue) => appConfig.setFeSelected(newValue)}
                                                // onChange={(newValue) => setFE(newValue)}
                                                placeholder="Sélectionnez une FE pour pouvoir modifier les avis..."
                                                noOptionsMessage={(option) => "Aucune FE correspondante n'a été trouvée"}
                                                styles={feSelectStyles}
                                            />
                                        </div>
                                        {appConfig.feSelected && (
                                            <>
                                                <GrFormClose
                                                    className="CloseFeSelectPerimetre"
                                                    size={'20px'}
                                                    color={'#000000'}
                                                    onClick={() => appConfig.setFeSelected(null)
                                                    // onClick={() => setFE(null)
                                                    }
                                                />
                                            </>
                                        )}
                                    </>
                                )}
                                {props.isITD && (
                                    <InformationsFiltres
                                        nbItems={props.nbItems}
                                        itemLabel={props.itemLabel}
                                        itemsLabel={props.itemsLabel}
                                        nbFiltered={nbFiltered}
                                        isFiltered={isFiltered}
                                        setIsFilterReset={setIsFilterReset}
                                        setIsFiltered={setIsFiltered}
                                        nbSelected={appConfig.selectedPostesPerimetreEtITD.length
                                        }
                                        nbSelectedVisible={nbSelectedVisible}
                                        gridApi={gridApi}
                                        isLoadingData={props.isLoadingData}
                                    />
                                )}
                            </>
                        )}
                    </div>

                    {!props.isITD && appConfig.profilSelectionne === PROFILS.FILIERE && !appConfig.idsSousViviersSelectionnees?.length && (
                        <div className={'d-flex flex-row align-items-center px-2 py-1 d-inline'}>
                            <h5>Vous n'avez aucun sous-vivier dans votre périmètre pour le moment.</h5>
                        </div>
                    )}
                    {!props.isITD && appConfig.profilSelectionne === PROFILS.PCP && !appConfig.idsFormationsEmploisSelectionnees?.length && (
                        <div className={'d-flex flex-row align-items-center px-2 py-1 d-inline'}>
                            <h5>Vous n'avez aucune formation-emploi dans votre périmètre pour le moment.</h5>
                        </div>
                    )}
                    {props.data && isPerimetre && (
                        <CustomAgGridReact
                            id={gridId}
                            gridOptions={gridOptions}
                            columnDefs={props.columnDefs}
                            rowData={props.context.groupeType === POSTES ? (dataPostesFE ? dataPostesFE : props.data) : props.data}
                            persistencePrefix={appConfig.utilisateurConnecte?.id}
                        />
                    )}
                    {props?.data && props.isITD && (
                        <CustomAgGridReact
                            id={gridId}
                            gridOptions={gridOptions}
                            columnDefs={props.columnDefs}
                            rowData={props?.data}
                            persistencePrefix={appConfig.utilisateurConnecte?.id}
                        />
                    )}
                    {/* Editeurs pour la modification multiple des compétences */}
                    <CompetencesPopinEditor
                        competences={parametresEditeurCompetences.competences}
                        setCompetences={(competences) => {

                            switch (parametresEditeurCompetences.typeDonnees) {
                                case ADMINISTRES:
                                    idList = appConfig.selectedAdministresPerimetre.map((a) => a.id);
                                    updateData = {a_liste_id_competences: competences};//.join(COMPETENCES_SEPARATEUR)};
                                    appConfig.managers.administres
                                        .updateMultiple(idList, updateData)
                                        .then((response) => {
                                            mutator(idList, 'p_id', props.reqData, updateData);
                                            toast.success('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                        })
                                        .catch((reason) => {
                                            console.error(reason);
                                            toast.error(
                                                "Une erreur est survenue lors de l'enregistrement des compétences. Veuillez contacter un administrateur.",
                                                {
                                                    autoClose: false
                                                }
                                            );
                                        });
                                    break;

                                case POSTES:
                                    idList = appConfig.selectedPostesPerimetreEtITD.map((a) => a.id);
                                    updateData = {competence_id: competences.join(COMPETENCES_SEPARATEUR)};
                                    appConfig.managers.postes
                                        .updateMultiple(idList, updateData)
                                        .then((response) => {
                                            mutator(idList, 'p_id', props.reqData, updateData);

                                        })
                                        .catch((reason) => {
                                            console.error(reason);
                                            toast.error(
                                                "Une erreur est survenue lors de l'enregistrement des compétences. Veuillez contacter un administrateur.",
                                                {
                                                    autoClose: false
                                                }
                                            );
                                        });
                                    break;
                            }
                            setParametresEditeurCompetences({});
                        }}
                        maxSelectedItems={parametresEditeurCompetences.maxSelectedItems}
                        isOpen={parametresEditeurCompetences.editorOpened}
                        setIsOpen={(opened) => {
                            setParametresEditeurCompetences({
                                ...parametresEditeurCompetences,
                                editorOpened: opened
                            });
                        }}
                        message={parametresEditeurCompetences.message}
                        context={appConfig}
                    />
                    {/* Editeurs pour la modiification multiple des marques */}
                    <MarquesPopinEditor
                        typeDonnees={parametresEditeurMarques.typeDonnees}
                        marques={parametresEditeurMarques.marques}
                        setMarques={(marques) => {
                            console.log('editeur de marques');
                            console.log(marques);
                            console.log(parametresEditeurMarques);
                            switch (parametresEditeurMarques.typeDonnees) {
                                case ADMINISTRES:
                                    idList = appConfig.selectedAdministresPerimetre.map((a) => a.id);
                                    updateData = {a_liste_id_marques: marques.join(MARQUES_SEPARATEUR)};
                                    appConfig.managers.administres
                                        .updateMultiple(idList, updateData)
                                        .then((response) => {
                                            mutator(idList, 'a_id_sap', props.reqData, updateData);

                                            toast.success('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                        })
                                        .catch((reason) => {
                                            console.error(reason);
                                            toast.error(
                                                "Une erreur est survenue lors de l'enregistrement des compétences. Veuillez contacter un administrateur.",
                                                {
                                                    autoClose: false
                                                }
                                            );
                                        });
                                    break;

                                case POSTES:
                                    idList = appConfig.selectedPostesPerimetreEtITD.map((a) => a.id);
                                    updateData = {p_liste_id_marques: marques.join(MARQUES_SEPARATEUR)};
                                    appConfig.managers.postes
                                        .updateMultiple(idList, updateData)
                                        .then((response) => {
                                            mutator(idList, 'p_id', props.reqData, updateData);
                                            toast.success('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                        })
                                        .catch((reason) => {
                                            console.error(reason);
                                            toast.error(
                                                "Une erreur est survenue lors de l'enregistrement des compétences. Veuillez contacter un administrateur.",
                                                {
                                                    autoClose: false
                                                }
                                            );
                                        });
                                    break;
                            }
                            setParametresEditeurMarques({});
                        }}
                        isOpen={parametresEditeurMarques.editorOpened}
                        setIsOpen={(opened) => {
                            setParametresEditeurMarques({
                                ...parametresEditeurMarques,
                                editorOpened: opened
                            });
                        }}
                        message={parametresEditeurMarques.message}
                        context={appConfig}
                    />
                    {/* Editeurs pour la modiification multiple des EIP */}
                    <EipPopinEditor
                        eip={parametresEditeurEip.eip}
                        setEip={(eip) => {
                            idList = appConfig.selectedAdministresPerimetre.map((a) => a.id);
                            updateData = {
                                a_domaine_futur_id: eip.domaineId,
                                a_filiere_futur_id: eip.filiereId,
                                a_nf_futur: eip.nfId
                            };
                            // Deux variables pour les mails :
                            const selectedAdministreSV = appConfig.selectedAdministresPerimetre.map((a) => a.perimetre_sousVivier_id);
                            const svid = getSVId(updateData['a_domaine_futur_id'], updateData['a_filiere_futur_id'], updateData['a_nf_futur']);
                            let msgConfirmation =
                            "Confirmez-vous l'envoi des administrés d\'id :\n    " +
                            idList +
                            '\nvers le sous-vivier :' +
                            '\n    - de domaine : ' + updateData['a_domaine_futur_id'] +
                            '\n    - de filière : ' + updateData['a_filiere_futur_id'] +
                            '\n    - de niveau fonctionnel : ' + updateData['a_nf_futur'] +
                            '\n?';

                            if (!window.confirm(msgConfirmation)) {
                                toast.info('Opération annulée.');
                                return;
                            } else {
                                appConfig.managers.administres
                                .updateMultiple(idList, updateData)
                                .then((response) => {
                                    mutator(idList, 'a_id_sap', props.reqData, updateData);
                                    alert("Les administrés d'id « " +
                                        idList +
                                        ' » ont bien été envoyés dans le sous-vivier « ' +
                                        updateData['a_domaine_futur_id'] + ', ' +
                                        updateData['a_filiere_futur_id'] + ', ' +
                                        updateData['a_nf_futur'] +
                                        ' ». Pensez à en informer le gestionnaire qui devra dorénavant les prendre en charge.'
                                    );
                                    const mailsto = getEmails(appConfig, svid);
                                    const mailscc = getEmails(appConfig, selectedAdministreSV);
                                    if (mailsto) {
                                        sendMail(mailsto,mailscc,svid,appConfig.selectedAdministresPerimetre);
                                    }
                                })
                                .catch((reason) => {
                                    console.error(reason);
                                    toast.error(
                                        "Erreur lors de l'envoi des administrés d'id « " +
                                        idList +
                                        ' »  vers le sous-vivier « ' +
                                        updateData['a_domaine_futur_id'] + ', ' +
                                        updateData['a_filiere_futur_id'] + ', ' +
                                        updateData['a_nf_futur'] +
                                        ' ». ' +
                                        'Ce sous-vivier n\'est pas en base.',
                                        { autoClose: false }
                                    );
                                });
                            };
                            setParametresEditeurEip({});
                        }}
                        isOpen={parametresEditeurEip.editorOpened}
                        setIsOpen={(opened) => {
                            setParametresEditeurEip({
                                ...parametresEditeurEip,
                                editorOpened: opened
                            });
                        }}
                        message={parametresEditeurEip.message}
                        titre={parametresEditeurEip.titre}
                        context={appConfig}
                    />
                    {/* Editeurs pour la modification des postes en sureffectif */}
                    <PosteSureffectifPopinEditor
                    
                        infos={parametresEditeurPostesSureffectif.infos}
                        setInfos={(infos) => {
                            idList = appConfig.selectedPostesPerimetreEtITD.map((p) => p.id);
                            updateData = {
                                departement  : infos.departement,
                                codeFe       : infos.codeFe,
                                lieu         : infos.lieu,
                                zoneDeDefense: infos.zoneDeDefense,
                                codeFeMere   : infos.codeFeMere,
                                etr          : infos.etr,
                            };
                            let msgConfirmation =
                            "Confirmez-vous la duplication du poste d\'id :\n    " +
                            idList +
                            '\navec les informations suivantes :' +
                            '\n    - Département : ' + updateData['departement'] +
                            '\n    - Code FE : ' + updateData['codeFe'] +
                            '\n    - Lieu : ' + updateData['lieu'] +
                            '\n    - Zone de défense : ' + updateData['zoneDeDefense'] +
                            '\n    - Code FE mère : ' + updateData['codeFeMere'] +
                            '\n    - ETR : ' + updateData['etr'] +
                            '\n?';

                            if (!window.confirm(msgConfirmation)) {
                                toast.info('Opération annulée.');
                                return;
                            } else { 
                                appConfig.managers.postes
                                .updateMultiple(idList, updateData, pam_id)
                                .then((response) => {
                                    mutator(idList, 'p_id', props.reqData, updateData);
                                    alert("Le poste d'id « " +
                                        idList + " de l'année " + pam_id +
                                        ' » a été dupliqué avec succès.'
                                    );
                                })
                                .catch((reason) => {
                                    console.error(reason);
                                    toast.error(
                                        "Erreur lors de la duplication du poste d'id « " +
                                        idList +
                                        ' ».',
                                        { autoClose: false }
                                    );
                                });
                            };
                            setParametresEditeurPostesSureffectif({});
                        }}
                        isOpen={parametresEditeurPostesSureffectif.editorOpened}
                        setIsOpen={(opened) => {
                            setParametresEditeurPostesSureffectif({
                                ...parametresEditeurPostesSureffectif,
                                editorOpened: opened
                            });
                        }}
                        message={parametresEditeurPostesSureffectif.message}
                        titre={parametresEditeurPostesSureffectif.titre}
                        context={appConfig}
                    />
                    {/* Editeur pour la modification des calculs */}
                    <CalculsPopinEditor
                        calculs={parametresEditeurCalculs}
                        isOpen={parametresEditeurCalculs.editorOpened}
                        setIsOpen={(opened) => {
                            setParametresEditeurCalculs({
                                ...parametresEditeurCalculs,
                                editorOpened: opened
                            });
                        }}
                        message={parametresEditeurCalculs.message}
                        context={appConfig}
                    />
                    {/* Editeur pour la modification des zones géographiques */}
                    <ZonesPopinEditor
                        zones={parametresEditeurZones.zones}
                        setZones={(zones) => {
                            //    console.log('setCompetences', competences);

                            idList = appConfig.selectedAdministresPerimetre.map((a) => a.id);
                            updateData = {a_liste_zones_geographiques_shm_pam: zones.join(ZONES_SEPARATEUR)};
                            appConfig.managers.administres
                                .updateMultiple(idList, updateData, pam_id)
                                .then((response) => {
                                    mutator(idList, 'a_id_sap', props.reqData, updateData);
                                    toast.success('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                })
                                .catch((reason) => {
                                    console.error(reason);
                                    toast.error(
                                        "Une erreur est survenue lors de l'enregistrement des zones. Veuillez contacter un administrateur.",
                                        {
                                            autoClose: false
                                        }
                                    );
                                });


                            setParametresEditeurZones({});
                        }}
                        maxSelectedItems={parametresEditeurZones.maxSelectedItems}
                        isOpen={parametresEditeurZones.editorOpened}
                        setIsOpen={(opened) => {
                            setParametresEditeurCompetences({
                                ...parametresEditeurZones,
                                editorOpened: opened
                            });
                        }}
                        message={parametresEditeurZones.message}
                        context={appConfig}
                    />
                    {/* Editeur pour la modification des zones géographiques */}
                    <DepartementsPopinEditor
                        zones={parametresEditeurDepartements.departement}
                        setDepartements={(dep) => {
                            //    console.log('setCompetences', competences);

                            idList = appConfig.selectedAdministresPerimetre.map((a) => a.id);
                            updateData = {a_liste_depts_souhaites_pam: dep.join(ZONES_SEPARATEUR)};
                            appConfig.managers.administres
                                .updateMultiple(idList, updateData, pam_id)
                                .then((response) => {
                                    mutator(idList, 'a_id_sap', props.reqData, updateData);
                                    toast.success('Mise à jour réussie.'); //  TODO AKA mettre à jour l'affichage de la grille immédiatement sans avoir recours à cette astuce inexplicable d'afficher un alert() ! :-O
                                })
                                .catch((reason) => {
                                    console.error(reason);
                                    toast.error(
                                        "Une erreur est survenue lors de l'enregistrement des départements. Veuillez contacter un administrateur.",
                                        {
                                            autoClose: false
                                        }
                                    );
                                });


                            setParametresEditeurDepartements({});
                        }}
                        maxSelectedItems={parametresEditeurDepartements.maxSelectedItems}
                        isOpen={parametresEditeurDepartements.editorOpened}
                        setIsOpen={(opened) => {
                            setParametresEditeurDepartements({
                                ...parametresEditeurDepartements,
                                editorOpened: opened
                            });
                        }}
                        message={parametresEditeurDepartements.message}
                        context={appConfig}
                    />
                </div>
            </div>
        </div>
    );
});

export default ListePerimetre;
