import React, { useContext, useEffect, useState } from 'react';
import { observer } from 'mobx-react';

import './Synthese.scss';
import { AvisRendererDisplay, InfoDisplay, NotesRendererDisplay, MarquesRendererDisplay } from './syntheseHelpers';
import { AppConfigContext } from '../../../stores/AppConfigStore';
import { getCompetences, getDepartements, getDomaineProperty, getFiliereProperty } from '../../Commun/listes/helpers/business-data-helpers';

/**
 * Composant "Synthèse d'un administré", présentant un résumé des données sur l'administré.
 *
 * @component
 * @param {array} props.administre - L'administré dont on veut afficher les informations
 * @param {Object} props.context - Le contexte d'affichage de la liste
 *
 * @example
 * return (
 * <SyntheseAdministre administre={selectedAdministre} context={...} />
 * )
 */
const SyntheseAdministre = observer((props) => {
    const appConfig = useContext(AppConfigContext);

    // States pour les données modifiables directement dans la fiche de synthèse
    const [marques, setMarques] = useState(props.administre.PAMEnCours_marques || []);
    const [avis, setAvis] = useState(props.administre.PAMEnCours_avis || '');
    const [notesPAM, setNotesPAM] = useState(props.administre.decision_notesUtilisateur || '');
    const [notesUtilisateur, setNotesUtilisateur] = useState(props.administre.PAMEnCours_notesUtilisateur || '');
    const [decisionLibelle, setDecisionLibelle] = useState(props.administre.decision_decision || '');

    // Set les valeurs de l'administré sélectionné dans les valeurs éditables
    useEffect(() => {
        setMarques(props.administre.PAMEnCours_marques || []);
        setAvis(props.administre.PAMEnCours_avis || '');
        setNotesPAM(props.administre.decision_notesUtilisateur || '');
        setNotesUtilisateur(props.administre.PAMEnCours_notesUtilisateur || '');
        setDecisionLibelle(props.administre.decision_decision || '');
    }, [props.administre]);

    // Libellés des compétences
    let libellesCompetences = [];
    if (props.administre.competences_competences) {
        const competences = getCompetences(appConfig.donneesReference, props.administre.competences_competences);
        libellesCompetences = competences.map((c) => (c ? c.libelle || c.id : ''));
    }

    let libellesDepartementsSouhaites = [];
    if (props.administre.FORMOB_departements_souhaites) {
        const departements = getDepartements(appConfig.donneesReference, props.administre.FORMOB_departements_souhaites);
        libellesDepartementsSouhaites = departements.map((c) => c.code + (c.code != c.libelle ? ' (' + c.libelle + ')' : ''));
    }

    return (
        <>
            <div className={'Synthese'}>
                <h5>Identité</h5>
                <div className="InfoGroup">
                    <div className="InfoColumn">
                        <InfoDisplay label={'Grade'} text={props.administre.identite_grade} />
                        <InfoDisplay label={'Matricule'} text={props.administre.identite_matricule} />
                        <InfoDisplay
                            label={'Date de naissance'}
                            text={props.administre.identite_date_naissance + ' (' + props.administre.identite_age + ' ans)'}
                        />
                        
                        <InfoDisplay label={'Ancienneté grade'} text={props.administre.identite_anciennete_grade} />
                    </div>
                    <div className="InfoColumn" style={{alignItems: 'flex-end'}}>
                        <InfoDisplay label={'Nom'} text={props.administre.identite_nom} />
                        <InfoDisplay label={'Prénom'} text={props.administre.identite_prenom} />
                        <InfoDisplay label={'Sexe'} text={props.administre.identite_sexe === 'F' ? 'Féminin' : 'Masculin'} />
                    </div>
                </div>
                {/*
                <h5>EIP actuel</h5>
                <div className="InfoGroup">
                    <InfoDisplay
                        label={'Domaine'}
                        text={getDomaineProperty(appConfig.donneesReference, props.administre.EIPActuel_domaine, 'code')}
                    />
                    <InfoDisplay
                        label={'Filière'}
                        text={getFiliereProperty(appConfig.donneesReference, props.administre.EIPActuel_filiere, 'code')}
                    />
                    <InfoDisplay label={'NF'} text={props.administre.EIPActuel_NF} />
                </div>
                 */}
                <h5>EIP futur</h5>
                <div className="InfoGroup">
                    <div className="InfoColumn">
                        <InfoDisplay
                            label={'Domaine'}
                            text={getDomaineProperty(appConfig.donneesReference, props.administre.EIPFutur_domaine, 'code')}
                        />
                        <InfoDisplay
                            label={'Filière'}
                            text={getFiliereProperty(appConfig.donneesReference, props.administre.EIPFutur_filiere, 'code')}
                        />
                        <InfoDisplay label={'NF'} text={props.administre.EIPFutur_NF} />
                        <InfoDisplay label={'Compétences'} text={libellesCompetences.join(' ; ')} />
                    </div>
                </div>
                <h5>Fonction</h5>
                <div className="InfoGroup">
                    <div className="InfoColumn">
                        <InfoDisplay label={'Fonction'} text={props.administre.fonction} />
                    </div>
                </div>{' '}
                <h5>Matrimonial</h5>
                <div className="InfoGroup">
                    <div className="InfoColumn">
                        <InfoDisplay label={'Situation'} text={props.administre.matrimonial_situation} />
                        <InfoDisplay label={'Emploi du conjoint'} text={props.administre.matrimonial_emploiConjoint} />
                        <InfoDisplay label={'Sexe du conjoint'} text={props.administre.matrimonial_sexeConjoint} />
                    </div>
                </div>
                <h5>Affectation actuelle</h5>
                <div className="InfoGroup">
                    <div className="InfoColumn">
                        <InfoDisplay label={'Garnison'} text={props.administre.affectationActuelle_lieu} />
                        <InfoDisplay label={'FE mère'} text={props.administre.affectationActuelle_libelleFeMere} />
                        <InfoDisplay label={'FE fille'} text={props.administre.affectationActuelle_libelle} />
                    </div>
                </div>
                <h5>FORMOB</h5>
                <div className="InfoGroup">
                    <div className="InfoColumn">
                        <InfoDisplay label={'Code motif'} text={props.administre.FORMOB_motif} />
                        <InfoDisplay label={'Départements souhaités'} text={libellesDepartementsSouhaites.join(' ; ')} />
                    </div>
                </div>
                <div className="InfoGroup">
                    <div className="InfoColumn">
                        <NotesRendererDisplay label={"Remarques de l'intéressé"} notes={props.administre.FORMOB_remarques} editable={false} />
                    </div>
                    <div className="InfoColumn">
                        <NotesRendererDisplay label={'Avis CdF'} notes={props.administre.FORMOB_avisCdF} editable={false} />
                    </div>
                </div>
                <h5>Commentaires à conserver</h5>
                <div className="InfoGroup">
                    <div className="InfoColumn">
                        <MarquesRendererDisplay label={'Marques'} marques={marques} setMarques={setMarques} context={props.context} />
                        <InfoDisplay label={'Année prévisible de mutation'} text={props.administre.PAMEnCours_anneePrevisibleMutation} />
                    </div>
                    <div className="InfoColumn" style={{alignItems: 'flex-end'}}>
                        <NotesRendererDisplay label={'Notes'} notes={notesUtilisateur} setNotes={setNotesUtilisateur} editable={false} />
                    </div>
                </div>
                <h5>PAM en cours</h5>
                <div className="InfoGroup">
                    <div className="InfoColumn">
                        <AvisRendererDisplay label={'Avis'} avis={avis} context={props.context} />
                        <InfoDisplay label={'CIAT'} text={props.administre.decision_ciat ? 'CIAT' : ''} />
                    </div>
                    <div className="InfoColumn" style={{alignItems: 'flex-end'}}>
                    <NotesRendererDisplay label={'Notes PAM'} notes={notesPAM} setNotes={setNotesPAM} editable={false} />
                        <InfoDisplay label={'PPE / SHM / ITD'} text={props.administre.decision_specifique} />
                    </div>
                </div>
            </div>
        </>
    );
});

export default SyntheseAdministre;
