import React, { useContext } from 'react';
import { observer } from 'mobx-react';
import AppConfigStore, { 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 connecté, correspondant à la vue "Mon périmètre"
 *
 * @component
 * @example
 * return (
 * <GestionPerimetre />
 * )
 */
const GestionPerimetre = observer(() => {
    /** @type {AppConfigStore} */
    const appConfig = useContext(AppConfigContext);
    let MesVolets;
    let initialPanelSizes;

    switch (appConfig.typeVuePerimetre) {
        case ADMINISTRES:
            MesVolets = [<ListeAdministres key="ListeAdministres"/>];
            initialPanelSizes = ['100%'];
            break;

        case POSTES:
            MesVolets = [<ListePostes key="ListePostes" isITD={false}/>];
            initialPanelSizes = ['100%'];
            break;

        case ADMINISTRES_POSTES:
            MesVolets = [
                <ListeAdministres key="ListeAdministres"/>,
                <ListePostes key="ListePostes" isITD={false}/>
            ];
            initialPanelSizes = ['50%', '50%'];
    }

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

export default GestionPerimetre;
