import React, {useEffect, useState, useContext} from 'react';
import {observer} from 'mobx-react';
import {toast} from 'react-toastify';

import 'ag-grid-enterprise';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

import {debounce} from '../../../helpers/misc-helpers';

import {AppConfigContext} from '../../../stores/AppConfigStore';

import AGLocaleText from '../../../i18n/aggrid-locale-fr';
import {commonAGGridColumnTypes} from '../../Commun/listes/commonAGGridColumnTypes';
import {getAvisAdministre, getNbAdministresEncoreAffectables} from '../../Commun/listes/helpers/business-data-helpers';
import {commonAGGridFrameworkComponents} from '../../Commun/listes/commonAGGridFrameworkComponents';
import {hasCheckboxSelection, onCellValueChanged} from '../../Commun/listes/fonctionsEtCallbacksAgGrid';
import {
    ajouteElementsCommunsAdministreAMenuContextuel,
    ajouteElementsCommunsPosteAMenuContextuel,
    ajouteElementsCommunsAMenuContextuel,
    supprimeSeparateursSurnumerairesMenuContextuel,
    ensureVisibleFirstSelectedRow
} from '../../Commun/listes/helpers/listes-ag-grid-helpers';

import {
    ADMINISTRES,
    POSTES,
    ADMINISTRES_POSTES,
    DECISION_AUCUNE,
    DECISION_PREPOSITIONNE,
    DECISION_POSITIONNE,
    DECISION_OMI_EN_COURS,
    DECISION_OMI_ACTIVE,
    DECISIONS_TOUTES_SAUF_AUCUNE,
    COMPETENCES_ADMINISTRES_MAX_ITEMS,
    COMPETENCES_POSTES_MAX_ITEMS,
    MARQUES_SEPARATEUR,
    COMPETENCES_SEPARATEUR
} from '../../../constantes/constantes';

import * as ActionsMetier from '../../Commun/ActionsMetier';

import i18n from '../../../i18n/i18n';

import AdministresManager from '../../../data-manager/AdministresManager';
import PostesManager from '../../../data-manager/PostesManager';

import CompetencesPopinEditor from '../../Commun/editors/competences/CompetencesPopinEditor';
import MarquesPopinEditor from '../../Commun/editors/marques/MarquesPopinEditor';
import EipPopinEditor from '../../Commun/editors/eip/EipPopinEditor';
import PonderationsPopinEditor from '../../Commun/editors/ponderations/PonderationsPopinEditor';

import InformationsFiltres from '../../Commun/InformationsFiltres';
import CustomAgGridReact from '../../Commun/listes/CustomAgGridReact';
import Select from 'react-select';
import {useLocation} from 'react-router-dom';
import {GrFormClose} from 'react-icons/all';
import './FeSelectPerimetre.scss';
import {toJS} from 'mobx';

/**
 * Composant permettant d'afficher une liste de postes ou d'administrés pour les vues "Vivier global" et "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.isVivierGlobal - Booléen pour savoir si on est sur le vivier global ou sur le périmètre
 *
 * @example
 * return (
 * <ListeGestionGlobaleEtPerimetre columnDefs={postesFields} data={rowData} nbItems={nbItems} title={'Postes'} itemLabel="poste" itemsLabel="poste"/>
 * )
 */

const ListeGestionGlobaleEtPerimetre = observer((props) => {
    const gridId = 'LGGEP_' + props.context.groupeType + '_' + (props.isVivierGlobal ? 'VG' : 'MP');
    const appConfig = useContext(AppConfigContext);

    /* -- 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 [parametresEditeurPonderations, setParametresEditeurPonderations] = useState({editorOpened: false});

    const administresManager = new AdministresManager(); //TODO factoriser cett instanciation quelque part ?
    const postesManager = new PostesManager(); //TODO factoriser cett instanciation quelque part ?

    const setSelectedAGGridRow = () => {
        let selectedItems =
            props.context.groupeType === ADMINISTRES ? appConfig.selectedAdministresGlobalEtPerimetre : appConfig.selectedPostesGlobalEtPerimetre;
        const selectedIds = selectedItems ? selectedItems.map((e) => e.id) : [];
        let nbSelectedVisible = 0;
        gridOptions.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(() => {
        const selectedRows = gridOptions.api.getSelectedRows();
        switch (props.context.groupeType) {
            case ADMINISTRES:
                appConfig.setSelectedAdministresGlobalEtPerimetre(selectedRows);
                break;
            case POSTES:
                appConfig.setSelectedPostesGlobalEtPerimetre(selectedRows);
                break;
        }
    }, 200);

    const showFirstSelectedRow = debounce(() => {
        if (props.context.groupeType === ADMINISTRES && appConfig.hasSelectedAdministresGlobalEtPerimetre) {
            ensureVisibleFirstSelectedRow(appConfig.selectedAdministresGlobalEtPerimetre, gridOptions.api);
        } else if (props.context.groupeType === POSTES && appConfig.hasSelectedPostesGlobalEtPerimetre) {
            ensureVisibleFirstSelectedRow(appConfig.selectedPostesGlobalEtPerimetre, gridOptions.api);
        }
    }, 200);

    /**
     * Options de la grille
     */
        //TODO factoriser les options communes à toutes les liste d'Ogure NG dans CustomAgGridReact
    const gridOptions = {
            debug: false,
            groupHeaderHeight: 35,
            headerHeight: 40,
            enableBrowserTooltips: true,
            animateRows: true,
            columnDefs: props.columnDefs,
            columnTypes: commonAGGridColumnTypes,
            context: props.context,
            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();
            },
            onFirstDataRendered: (params) => {
                showFirstSelectedRow();
            },
            onComponentStateChanged: (params) => {
                // Nécessaire car onGridReady n'est pas *systématiquement* appelé quand ce composant est mis à jour ?!
                setSelectedAGGridRow();
            },
            onCellValueChanged: (params) => {
                onCellValueChanged(params, props.context.groupeType, appConfig);
                onSelectionChanged(); // 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')
        };


    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);
        }

        if (!props.isVivierGlobal) {
            ajouteElementsCommunsAMenuContextuel(menuItems);
        }

        supprimeSeparateursSurnumerairesMenuContextuel(menuItems);

        if (menuItems.length == 1) {
            menuItems.push({
                name:
                    'Aucune action possible sur ' +
                    (isGroupeAdministre ? 'cet administré' : 'ce poste') +
                    (props.isVivierGlobal ? ' dans la vue "Vivier global"' : ''),
                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;

        // Action : fiche détaillée administré (toujours proposée)
        ajouteElementsCommunsAdministreAMenuContextuel(menuItems, administreDataNode, appConfig, props.isVivierGlobal ? [] : ['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 submenuDecisionItems = [];
        const idPosteAssocieAAdministre = administreDataNode.decision_posteId;
        const posteUniqueSelectionne =
            appConfig.hasSelectedPostesGlobalEtPerimetre && appConfig.selectedPostesGlobalEtPerimetre.length == 1
                ? appConfig.selectedPostesGlobalEtPerimetre[0]
                : null;
        console.log('posteUniqueSelectionne', posteUniqueSelectionne);

        const decisionAdministre = administreDataNode.decision_decision;

        const avisAdministre = getAvisAdministre(appConfig.donneesReference, administreDataNode.PAMEnCours_avis);
        const nbAdministresEncoreAffectablesAPoste = getNbAdministresEncoreAffectables(appConfig.donneesReference, posteUniqueSelectionne);

        // 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.vueVivierGlobalEtPerimetre == ADMINISTRES_POSTES && // On est dans la vue mixte
                posteUniqueSelectionne && // Il y a un et un seul poste sélectionné
                posteUniqueSelectionne.perimetre_sousVivier_id == administreDataNode.perimetre_sousVivier_id && // Ce poste fait partie du même sous-vivier que l'administré
                avisAdministre &&
                avisAdministre.affectationManuellePossible && // L'administré a un avis permettant l'affectation manuelle
                nbAdministresEncoreAffectablesAPoste >= 1 // Il est encore possible d'affecter un administré à ce poste
            ) {
                for (const decision of DECISIONS_TOUTES_SAUF_AUCUNE) {
                    submenuDecisionItems.push({
                        name: i18n.decision[decision].libelleAction,
                        cssClasses: ['subMenu', 'svgIcon', 'decision', decision],
                        action: () =>
                            ActionsMetier.creeOuMAJDecisionAdministreAvecPoste(
                                administreDataNode.id,
                                posteUniqueSelectionne.id,
                                decision,
                                administreDataNode.decision_decision || DECISION_AUCUNE,
                                appConfig.donneesReference
                            ),
                        disabled: idPosteAssocieAAdministre == posteUniqueSelectionne.id && decisionAdministre == decision
                    });
                }

                if (submenuDecisionItems.length) {
                    menuItems.push({
                        name: 'Lier cet administré avec le poste <em>« ' + posteUniqueSelectionne.libelleGroupe + ' »</em>...',
                        subMenu: submenuDecisionItems,
                        cssClasses: ['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 ' +
                        (decisionAdministre === DECISION_PREPOSITIONNE
                            ? 'le prépositionnement'
                            : decisionAdministre === DECISION_POSITIONNE
                                ? 'le positionnement'
                                : decisionAdministre === DECISION_OMI_EN_COURS
                                    ? "l'OMI en cours"
                                    : decisionAdministre === DECISION_OMI_ACTIVE
                                        ? "l'OMI activé"
                                        : decisionAdministre) + // fallback qui ne devrait jamais arriver
                        ' de cet administré',
                    action: () =>
                        ActionsMetier.creeOuMAJDecisionAdministreAvecPoste(
                            administreDataNode.id,
                            idPosteAssocieAAdministre,
                            DECISION_AUCUNE,
                            decisionAdministre,
                            appConfig.donneesReference
                        ),
                    cssClasses: ['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: () => ActionsMetier.exclureAdministreDuSousVivier(administreDataNode),
                cssClasses: ['svgIcon', 'exclureAdministreSV']
            });
        }

        // --- Action sur vivier global : inclure l'administré sélectionné à mon périmètre (uniquement s'il n'appartient à aucun sous-vivier)
        if (props.isVivierGlobal) {
            const sousViviers = appConfig.sousViviersUtilisateurConnecte;
            if (!administreDataNode.perimetre_sousVivier_id && sousViviers.length) {
                menuItems.push('separator', {
                    name: 'Inclure cet administré dans le sous-vivier...',
                    cssClasses: ['svgIcon', 'inclureAdministreSV'],
                    subMenu: sousViviers.map((sousVivier) => ({
                        name: sousVivier.sv_libelle,
                        cssClasses: ['subMenu', 'noIcon'],
                        action: () => ActionsMetier.inclureAdministreASousVivier(administreDataNode, sousVivier)
                    }))
                });
            }
        }

        // --- 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.hasSelectedAdministresGlobalEtPerimetre && appConfig.selectedAdministresGlobalEtPerimetre.length > 1 && !props.isVivierGlobal) {
            const nbAdministresSelectionnes = appConfig.selectedAdministresGlobalEtPerimetre.length;
            const selectedAdministresId = appConfig.selectedAdministresGlobalEtPerimetre.map((a) => a.id);

            menuItems.push('separator', {
                name: 'Modification multiple (' + nbAdministresSelectionnes + ' administrés sélectionnés)...',
                cssClasses: ['svgIcon', 'modificationMultiple'],
                subMenu: [
                    {
                        name: 'EIP futur',
                        cssClasses: ['subMenu', 'noIcon', 'editEIPFutur'],
                        action: () => {
                            setParametresEditeurEip({
                                eip: {},
                                editorOpened: true,
                                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>
                                )
                            });
                        }
                    },
                    /*
                    {
                        name: 'Notes',
                        cssClasses: ['svgIcon', 'editNotes'],
                        action: () => {

                        }
                    },
                    */
                    {
                        name: 'Avis',
                        cssClasses: ['subMenu', 'noIcon', 'editAvis'],
                        subMenu: appConfig.donneesReference.avisAdministre.map((avis, i) => ({
                            name: avis.libelle,
                            cssClasses: ['subMenu', 'noIcon', 'avis', 'administre', avis.code],
                            action: () => {
                                administresManager
                                    .updateMultiple(selectedAdministresId, {a_statut_pam: avis.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 avis. Veuillez contacter un administrateur.",
                                            {
                                                autoClose: false
                                            }
                                        );
                                    });
                            }
                        }))
                    },

                    {
                        name: 'Statut futur',
                        cssClasses: ['subMenu', 'noIcon'],
                        subMenu: appConfig.donneesReference.statutFutur.map(ref => ({
                            name: ref.libelle,
                            cssClasses: ['subMenu', 'noIcon'],
                            action: () => {
                                administresManager.updateMultiple(selectedAdministresId, {statut_futur: 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 avis. Veuillez contacter un administrateur.",
                                        { autoClose: false }
                                    );
                                });
                            }
                        }))
                    },
                    {
                        name: 'Marques',
                        cssClasses: ['subMenu', '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>
                                )
                            });
                        }
                    },

                    {
                        name: 'Compétences',
                        cssClasses: ['subMenu', '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>
                                )
                            });
                        }
                    }
                ]
            });
        }
    }

    /**
     * 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, props.isVivierGlobal ? [] : ['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.hasSelectedAdministresGlobalEtPerimetre && appConfig.selectedAdministresGlobalEtPerimetre.length == 1
                ? appConfig.selectedAdministresGlobalEtPerimetre[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.isSousVivierUtilisateurConnecte(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.vueVivierGlobalEtPerimetre == ADMINISTRES_POSTES && // On est dans la vue mixte
                administreUniqueSelectionne && // Il y a un et un seul administré sélectionné
                administreUniqueSelectionne.perimetre_sousVivier_id == posteDataNode.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
            ) {
                for (const decision of DECISIONS_TOUTES_SAUF_AUCUNE) {
                    submenuDecisionItems.push({
                        name: i18n.decision[decision].libelleAction,
                        cssClasses: ['subMenu', 'svgIcon', 'decision', decision],
                        action: () =>
                            ActionsMetier.creeOuMAJDecisionAdministreAvecPoste(
                                administreUniqueSelectionne.id,
                                posteDataNode.id,
                                decision,
                                posteDataNode.decision_decision || DECISION_AUCUNE,
                                appConfig.donneesReference
                            )
                        //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: ['svgIcon', 'changerDecision']
                    });
                }
            }

            /*
            //Action : exclure le poste du sous-vivier
            menuItems.push(
                'separator',
                {
                    name: 'Exclure ce poste du sous-vivier <em>« ' + contextPoste.perimetre_sousVivier_libelle + ' »</em>',
                    action: () => ActionsMetier.exclurePosteDuSousVivier(contextPoste),
                    cssClasses: ['svgIcon', 'exclurePosteSV']
                }
            );
            */
        }

        if (props.isVivierGlobal) {
            // --- Vue vivier global, liste des postes
            // TODO AKA Pierric : Maj le front ou le cache en cas d'action
            /*
            // Action : inclure le poste sélectionné à mon périmètre (uniquement s'il n'appartient à aucun sous-vivier)
            const sousViviers = appConfig.sousViviersUtilisateurConnecte;
            if (!contextPoste.perimetre_sousVivier_id && sousViviers.length) {
                menuItems.push('separator',{
                    name: 'Inclure ce poste dans le sous-vivier...',
                    cssClasses: ['svgIcon', 'inclurePosteSV'],
                    subMenu: sousViviers.map((sousVivier) => ({
                        name: sousVivier.sv_libelle,
                        action: () => ActionsMetier.inclurePosteASousVivier(contextPoste, sousVivier)
                    }))
                });

                //menuItems.push('separator');
            }
            */
        }

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

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

                        }
                    },
                    */
                    // {
                    //     name: 'Avis',
                    //     cssClasses: ['subMenu', 'noIcon', 'editAvis'],
                    //     subMenu: appConfig.donneesReference.avisPoste.map((avis, i) => ({
                    //         name: avis.libelle,
                    //         cssClasses: ['subMenu', 'noIcon', 'avis', 'poste', avis.code],
                    //         action: () => {
                    //             postesManager
                    //                 .updateMultiple(selectedPostesId, {p_statut_pam: avis.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 avis. Veuillez contacter un administrateur.",
                    //                         {
                    //                             autoClose: false
                    //                         }
                    //                     );
                    //                 });
                    //         }
                    //     }))
                    // },

                    {
                        name: 'CIAT',
                        cssClasses: ['subMenu', 'noIcon', 'editCiat'],
                        action: () => {
                            setParametresEditeurCiat({
                                typeDonnees: POSTES,
                                ciat: [],
                                editorOpened: true,
                                message: (
                                    <p>
                                        Sélectionnez le CIAT à affecter aux {nbPostesSelectionnes} postes
                                        sélectionnés.
                                        <br/> ⚠ Cela REMPLACERA l'ensemble des CIAT éventuellement déjà associés à
                                        ces postes par les nouveaux
                                        CIAT sélectionnées.
                                    </p>
                                )
                            });
                        }
                    },

                    {
                        name: 'Poste spécifique',
                        cssClasses: ['subMenu', 'noIcon', 'editSpecifique'],
                        action: () => {
                            setParametresEditeurSpecifique({
                                typeDonnees: POSTES,
                                ciat: [],
                                editorOpened: true,
                                message: (
                                    <p>
                                        Sélectionnez le poste spécifique à affecter aux {nbPostesSelectionnes} postes
                                        sélectionnés.
                                        <br/> ⚠ Cela REMPLACERA l'ensemble des postes spécifiques éventuellement déjà associés à
                                        ces postes par les nouveaux
                                        postes spécifiques sélectionnées.
                                    </p>
                                )
                            });
                        }
                    },

                    {
                        name: 'Marques',
                        cssClasses: ['subMenu', '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>
                                )
                            });
                        }
                    },

                    {
                        name: 'Compétences',
                        cssClasses: ['subMenu', '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>
                                )
                            });
                        }
                    },

                    {
                        name: 'Pondérations',
                        cssClasses: ['subMenu', 'noIcon', 'editPonderations'],
                        action: () => {
                            setParametresEditeurPonderations({
                                typeDonnees: POSTES,
                                criteres: ['Filière', 'NF', 'Compétences'],
                                ponderations: [100 / 3, 100 / 3, 100 / 3],
                                editorOpened: true,
                                message: (
                                    <p>
                                        Sélectionnez les pondérations à affecter aux {nbPostesSelectionnes} postes
                                        sélectionnés.
                                        <br/> ⚠ Cela REMPLACERA l'ensemble des pondérations associées à ces postes par
                                        les nouvelles pondérations
                                        sélectionnées.
                                    </p>
                                )
                            });
                        }
                    }
                ]
            });
        }
    }

    const mutator = (keyList, key, reqData, updateData) => {
        console.log(props.reqData);
        // FIXME: Refresh la données immédiatement en implémentant le mutate de SWRInfinite : https://github.com/vercel/swr/issues/908
        // let newData = {
        //     results: props.reqData.results.map((r) => (keyList.includes(r[key]) ? { ...r, ...updateData } : r)),
        //     count: props.reqData.count
        // };
        // props.mutator(newData);
        // props.mutator()
        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
        // 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);

    // Nombre de postes vacants par FE
    const [nbPostesVacants, setNbPostesVacants] = useState(undefined);

    const fetchPostesVacants = async (fe_id, sv_id) => {
        try {
            const result = await postesManager.fetchNbVacants(fe_id, sv_id);
            setNbPostesVacants(result?.data.nb_poste_vacant_vivier);
        } catch (e) {
            console.error(e);
            toast.error('Une erreur est survenue lors de la récupération du nombre de postes à affecter pour la FE sélectionnée.', {
                autoClose: false
            });
        }
    };

    useEffect(() => {
        setFeOptions(
            appConfig.feSousVivierSelectionne.map((fe) => {
                return {value: fe.fe_code, label: fe.fe_code + ' (' + fe.fe_libelle + ')'};
            })
        );
    }, [appConfig.feSousVivierSelectionne]);

    useEffect(() => {
        if (appConfig.feSelected && props?.data.length > 0) {
            const newData = props?.data.filter((d) => d.organisme_FE === appConfig.feSelected.value);
            setDataPostesFE(newData);

            fetchPostesVacants(appConfig.feSelected.value, appConfig.idSousVivierSelectionne);
        } else {
            setDataPostesFE(undefined);
        }
    }, [appConfig.feSelected, props?.data]);

    // Variables pour définir les différents cas utilisateurs (PCP, gestionnaire, les 2)
    const isVivierGlobal = location.pathname.includes('gestionVivierGlobal');
    const hasSousVivier = appConfig.sousViviersUtilisateurConnecte.length > 0;
    const [dataPCP, setDataPCP] = useState(undefined);

    // Filtrer les données sur le groupe FE du PCP
    useEffect(() => {
        if (props?.data && appConfig.isPCP && appConfig.groupeFePCP && isVivierGlobal) {
            const newDataPostes = props?.data.filter((d) => appConfig.groupeFePCP.some((fe) => fe.code === d.organisme_FE));
            const newDataAdmin = props?.data.filter((d) => appConfig.groupeFePCP.some((fe) => fe.code === d.affectationActuelle_FE));

            props.context.groupeType === POSTES ? setDataPCP(newDataPostes) : setDataPCP(newDataAdmin);
        }
    }, [props?.data]);

    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 && (
                            <>
                                {isVivierGlobal && ((hasSousVivier && appConfig.isPCP) || (appConfig.isPCP && !hasSousVivier)) && (
                                    <InformationsFiltres
                                        nbItems={appConfig.displayPCPData && dataPCP ? dataPCP.length : props.nbItems}
                                        itemLabel={props.itemLabel}
                                        itemsLabel={props.itemsLabel}
                                        nbFiltered={nbFiltered}
                                        isFiltered={isFiltered}
                                        setIsFilterReset={setIsFilterReset}
                                        setIsFiltered={setIsFiltered}
                                        nbSelected={
                                            props.context.groupeType === ADMINISTRES
                                                ? appConfig.selectedAdministresGlobalEtPerimetre.length
                                                : appConfig.selectedPostesGlobalEtPerimetre.length
                                        }
                                        nbSelectedVisible={nbSelectedVisible}
                                        gridApi={gridApi}
                                        isLoadingData={props.isLoadingData}
                                    />
                                )}
                                {isVivierGlobal && hasSousVivier && !appConfig.isPCP && (
                                    <InformationsFiltres
                                        nbItems={props.nbItems}
                                        itemLabel={props.itemLabel}
                                        itemsLabel={props.itemsLabel}
                                        nbFiltered={nbFiltered}
                                        isFiltered={isFiltered}
                                        setIsFilterReset={setIsFilterReset}
                                        setIsFiltered={setIsFiltered}
                                        nbSelected={
                                            props.context.groupeType === ADMINISTRES
                                                ? appConfig.selectedAdministresGlobalEtPerimetre.length
                                                : appConfig.selectedPostesGlobalEtPerimetre.length
                                        }
                                        nbSelectedVisible={nbSelectedVisible}
                                        gridApi={gridApi}
                                        isLoadingData={props.isLoadingData}
                                    />
                                )}
                                {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.selectedAdministresGlobalEtPerimetre.length
                                                : appConfig.selectedPostesGlobalEtPerimetre.length
                                        }
                                        nbSelectedVisible={nbSelectedVisible}
                                        gridApi={gridApi}
                                        isLoadingData={props.isLoadingData}
                                    />
                                )}
                                {props.context.groupeType === POSTES && isPerimetre && (
                                    <>
                                        <div className="FeSelectPerimetre">
                                            <Select
                                                options={feOptions}
                                                value={appConfig.feSelected}
                                                onChange={(newValue) => appConfig.setFeSelected(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)}
                                                />
                                                <strong className="NbPostesVacantsFE">Nombre de postes à affecter
                                                    : {nbPostesVacants} </strong>
                                            </>
                                        )}
                                    </>
                                )}
                            </>
                        )}
                    </div>

                    {!props?.data && (
                        <div className={'d-flex flex-row align-items-center px-2 d-inline'}>
                            <h5>Vous n'avez aucun sous-vivier dans votre périmètre pour le moment. </h5>
                        </div>
                    )}
                    {props?.data && isVivierGlobal && ((hasSousVivier && appConfig.isPCP) || (appConfig.isPCP && !hasSousVivier)) && (
                        <CustomAgGridReact
                            id={gridId}
                            gridOptions={gridOptions}
                            rowData={appConfig.displayPCPData ? dataPCP : props?.data}
                            persistencePrefix={appConfig.utilisateurConnecte?.id}
                        />
                    )}
                    {props?.data && isVivierGlobal && hasSousVivier && !appConfig.isPCP && (
                        <CustomAgGridReact
                            id={gridId}
                            gridOptions={gridOptions}
                            rowData={props?.data}
                            persistencePrefix={appConfig.utilisateurConnecte?.id}
                        />
                    )}
                    {props?.data && isPerimetre && (
                        <CustomAgGridReact
                            id={gridId}
                            gridOptions={gridOptions}
                            rowData={props.context.groupeType === POSTES ? (dataPostesFE ? dataPostesFE : props?.data) : props?.data}
                            persistencePrefix={appConfig.utilisateurConnecte?.id}
                        />
                    )}
                    {/* Editeurs pour la modification multiple des compétences */}
                    <CompetencesPopinEditor
                        competences={parametresEditeurCompetences.competences}
                        setCompetences={(competences) => {
                            //    console.log('setCompetences', competences);

                            switch (parametresEditeurCompetences.typeDonnees) {
                                case ADMINISTRES:
                                    idList = appConfig.selectedAdministresGlobalEtPerimetre.map((a) => a.id);
                                    updateData = {a_liste_id_competences: competences.join(COMPETENCES_SEPARATEUR)};
                                    administresManager
                                        .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.selectedPostesGlobalEtPerimetre.map((a) => a.id);
                                    updateData = {competence_id: competences.length ? competences[0] : null};
                                    postesManager
                                        .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.selectedAdministresGlobalEtPerimetre.map((a) => a.id);
                                    updateData = {a_liste_id_marques: marques.join(MARQUES_SEPARATEUR)};
                                    administresManager
                                        .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.selectedPostesGlobalEtPerimetre.map((a) => a.id);
                                    updateData = {p_liste_id_marques: marques.join(MARQUES_SEPARATEUR)};
                                    postesManager
                                        .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 marques */}
                    {/* <CiatPopinEditor
                        typeDonnees={parametresEditeurCiat.typeDonnees}
                        ciat={parametresEditeurCiat.ciat}
                        setCiat={(ciat) => {
                            console.log('editeur de CIAT');
                            console.log(ciat);
                            console.log(parametresEditeurCiat);
                            switch (parametresEditeurCiat.typeDonnees) {
                                case POSTES:
                                    idList = appConfig.selectedPostesGlobalEtPerimetre.map((a) => a.id);
                                    updateData = {p_liste_id_marques: marques.join(MARQUES_SEPARATEUR)};
                                    postesManager
                                        .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.selectedAdministresGlobalEtPerimetre.map((a) => a.id);
                            updateData = {
                                a_domaine_futur_id: eip.domaineId,
                                a_filiere_futur_id: eip.filiereId,
                                a_nf_futur: eip.nfId
                            };
                            administresManager
                                .updateMultiple(idList, updateData)
                                .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 EIP. Veuillez contacter un administrateur.", {
                                        autoClose: false
                                    });
                                });
                            setParametresEditeurEip({});
                        }}
                        isOpen={parametresEditeurEip.editorOpened}
                        setIsOpen={(opened) => {
                            setParametresEditeurEip({
                                ...parametresEditeurEip,
                                editorOpened: opened
                            });
                        }}
                        message={parametresEditeurEip.message}
                        context={appConfig}
                    />
                    {/* Editeurs pour la modiification multiple des pondérations */}
                    <PonderationsPopinEditor
                        criteres={parametresEditeurPonderations.criteres}
                        ponderations={parametresEditeurPonderations.ponderations}
                        setPonderations={(ponderations) => {
                            //    console.log('setPonderations', ponderations);

                            switch (parametresEditeurPonderations.typeDonnees) {
                                case POSTES:
                                    idList = appConfig.selectedPostesGlobalEtPerimetre.map((a) => a.id);
                                    updateData = {
                                        p_poids_filiere: ponderations[0],
                                        p_poids_nf: ponderations[1],
                                        p_poids_competences: ponderations[2]
                                    };
                                    postesManager
                                        .updateMultiple(idList, updateData)
                                        .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 pondérations. Veuillez contacter un administrateur.",
                                                {
                                                    autoClose: false
                                                }
                                            );
                                        });
                                    break;
                            }
                            setParametresEditeurPonderations({});
                        }}
                        isOpen={parametresEditeurPonderations.editorOpened}
                        setIsOpen={(opened) => {
                            setParametresEditeurPonderations({
                                ...parametresEditeurPonderations,
                                editorOpened: opened
                            });
                        }}
                        message={parametresEditeurPonderations.message}
                        context={appConfig}
                    />
                </div>
            </div>
        </div>
    );
});

export default ListeGestionGlobaleEtPerimetre;
