import { observer } from 'mobx-react';
import React, { useContext } from 'react';
import { BsEyeFill } from 'react-icons/all';
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 SyntheseAdministre from '../../Commun/Synthese/SyntheseAdministre';
import './SyntheseDecisionAdministre.scss';

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

    const annee = appConfig.PAMSelectionne;
    const params = {};
    annee && (params.pam__in = annee);
    const getKey = () => appConfig.managers.administres.buildGetCallKey(appConfig.selectedAdministreDecision.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' }}>Administré sélectionné</h3>
            {!data ? (
                error ? (
                    <Erreur />
                ) : (
                    <Chargement />
                )
            ) : (
                <>
                    <div className={'FicheDetailleeLink'}>
                        <a
                            href="#"
                            className="withIcon"
                            onClick={(event) => {
                                event.preventDefault();
                                appConfig.setAdministreFicheDetaillee(appConfig.selectedAdministreDecision.id);
                            }}
                        >
                            <BsEyeFill size={'15px'} />
                            <span>Fiche détaillée de l'administré</span>
                        </a>
                    </div>

                    <SyntheseAdministre administre={props.agGridConfigurationAdministres.adapteAdministre(data)} context={props.context} />
                </>
            )}
            {appConfig.administreFicheDetaillee && <FicheDetailleeAdministre appConfig={appConfig} />}
        </div>
    );
});

export default SyntheseDecisionAdministre;
