import { observer } from 'mobx-react';
import React, { useContext } from 'react';
import useSWR from 'swr';
import AppConfigStore, { AppConfigContext } from '../../../stores/AppConfigStore';
import { Chargement } from '../../Commun/Chargement';
import { Erreur } from '../../Commun/Erreur';
import FicheDetailleeAdministre from '../../Commun/FicheDetaillee/FicheDetailleeAdministre';
import SynthesePoste from '../../Commun/Synthese/SynthesePoste';

/**
 * Composant "Synthèse d'un poste", présenté dans le volet central de la vue "Aide à la décision", pour le poste sélectionné.
 *
 * @component
 * @param {object} props.agGridConfigurationPostes - Instance de la classe AGGridConfigurationPostes
 * @param {object} props.context - Le contexte d'affichage de la liste
 *
 * @example
 * return (
 * <SyntheseDecisionPoste agGridConfigurationPostes={...} context={...}/>
 * )
 */
const SyntheseDecisionPoste = observer((props) => {
    /** @type {AppConfigStore} */
    const appConfig = useContext(AppConfigContext);

    const annee = appConfig.PAMSelectionne;
    const params = {};
    annee && (params.pam__in = annee);
    
    const getKey = () => appConfig.managers.postes.buildGetCallKey(appConfig.selectedPosteDecision?.id_pam);
    const { data, error } = useSWR(getKey);

    return (
        <div className="d-flex flex-column h-100 px-2 pt-2">
            <h3 style={{ fontSize: '1.2rem', marginBottom: '0' }}>Poste sélectionné</h3>
            {!data ? (
                error ? (
                    <Erreur />
                ) : (
                    <Chargement />
                )
            ) : (
                <SynthesePoste poste={props.agGridConfigurationPostes.adaptePoste(data)} context={props.context} />
            )}
            {appConfig.administreFicheDetaillee && <FicheDetailleeAdministre appConfig={appConfig} />}
        </div>
    );
});

export default SyntheseDecisionPoste;
