import React, { useContext } from 'react';
import { observer } from 'mobx-react';
import { AppConfigContext } from '../../stores/AppConfigStore';
import VoletsFractionnes from '../Commun/VoletsFractionnes';
import ListeAdministres from './Commun/ListeAdministres';
import ListePostes from './Commun/ListePostes';
import { ADMINISTRES, ADMINISTRES_POSTES, POSTES } from '../../constantes/constantes';
import FicheDetailleeAdministre from '../Commun/FicheDetaillee/FicheDetailleeAdministre';

/**
 * Composant de gestion du périmètre du gestionnaire ITD connecté, correspondant à la vue "ITD"
 *
 * @component
 * @example
 * return (
 * <GestionITD />
 * )
 */
const GestionITD = observer(() => {
    const appConfig = useContext(AppConfigContext);
    let MesVolets;
    let initialPanelSizes;

    MesVolets = [<ListePostes key="ListePostes" isITD={true}/>];
    initialPanelSizes = ['100%'];


    return (
        <div className="GestionVivierGlobal d-flex flex-column align-items-stretch w-100">
            <VoletsFractionnes
                disposition="horizontal"
                volets={MesVolets}
                paneSizes={initialPanelSizes}
                persistenceId={ appConfig.utilisateurConnecte?.id + '/GestionITD' }
            />
            {appConfig.administreFicheDetaillee && <FicheDetailleeAdministre appConfig={appConfig} />}
        </div>
    );
});

export default GestionITD;
