import React, { useContext } from 'react';

import './GestionVivierGlobal.scss';

import VoletsFractionnes from '../Commun/VoletsFractionnes';
import { AppConfigContext } from '../../stores/AppConfigStore';
import { observer } from 'mobx-react';
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 gstion du vivier global, correspondant à la vue "Vivier global".
 *
 * @component
 * @example
 * return (
 * <GestionVivierGlobal />
 * )
 */

const GestionVivierGlobal = observer(() => {
    const appConfig = useContext(AppConfigContext);
    let MesVolets;
    let initialPanelSizes;

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

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

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

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

export default GestionVivierGlobal;
