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

import './Synthese.scss';
import { InfoDisplay, NotesRendererDisplay, MarquesRendererDisplay } from './syntheseHelpers';
import AppConfigStore, { AppConfigContext } from '../../../stores/AppConfigStore';
import {
    getCompetences,
    getDomaineProperty,
    getFiliereProperty,
    getNbAdministresAffectables,
    getNbAdministresAffectes
} from '../../Commun/listes/helpers/business-data-helpers';
import { getLibelleAvisPoste } from '../../../helpers/i18n-helper';
import i18n from '../../../i18n/i18n';

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

    // States pour les données modifiables directement dans la fiche de synthèse
    const [marques, setMarques] = useState(null);
    const [notesUtilisateur, setNotesUtilisateur] = useState(null);
    const [nbAvisDecidables, setNbAvisDecidables] = useState(null);
    const [nbTotalDecisions, setNbTotalDecisions] = useState(null);
    const [nbDecisionsParAvis, setNbDecisionsParAvis] = useState([]);

    useEffect(() => {
        setMarques(props.poste.PAMEnCours_marques || []);

        setNotesUtilisateur(props.poste.PAMEnCours_notesUtilisateur || '');

        setNbAvisDecidables(getNbAdministresAffectables(appConfig.donneesReference, props.poste));

        const totalDecisions = getNbAdministresAffectes(appConfig.donneesReference, props.poste);
        setNbTotalDecisions(totalDecisions);

        // Détermination du nb de décisions par avis par répartition du nb total de décision : on sert les prioritaires en 1er
        let dispo = totalDecisions;
        let dpa = [];
        for (let ap of appConfig.donneesReference.avisPoste.filter((ap) => ap.inclusAlgo)) {
            const nbMax = parseInt(props.poste['p_nb_' + ap.code.toLowerCase()], 10) || 0;
            const nb = Math.min(dispo, nbMax);
            dpa.push(nb);
            dispo -= nb;
        }
        setNbDecisionsParAvis(dpa);
    }, [props.poste]);

    // Libellés des compétences
    let libellesCompetences = '';
    if (props.poste.poste_competences) {
        const competences = getCompetences(appConfig.donneesReference, props.poste.poste_competences);
        libellesCompetences = competences.map((c) => c.libelle || c.id);
    }

    return (
        <>
            <div className="Synthese">
                <h5>PAM en cours</h5>
                <div className="InfoGroup">
                    <div className="InfoColumn">
                        <NotesRendererDisplay label="Notes" notes={notesUtilisateur} setNotes={setNotesUtilisateur} editable={false} />
                    </div>
                    <div className="InfoColumn">
                        <MarquesRendererDisplay label="Marques" marques={marques} setMarques={setMarques} context={props.context} />
                        <div>&nbsp;</div>
                    </div>
                </div>
                {/* <table className="statsAvisDecisions">
                    <thead>
                        <tr>
                            <th className="vide"></th>
                            {appConfig.donneesReference.avisPoste
                                .filter((ap) => ap.inclusAlgo)
                                .map(ap => {
                                    const code = ap.code;
                                    return (
                                        <th key={code} className={'avis poste ' + code}>
                                            {i18n.avisPoste?.[code]?.libelleCourt ?? getLibelleAvisPoste(code, appConfig.donneesReference) ?? code}
                                        </th>
                                    );
                                })}
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>Nb avis</th>
                            {appConfig.donneesReference.avisPoste
                                .filter((ap) => ap.inclusAlgo)
                                .map((ap) => (
                                    <td key={ap.code}>{props.poste['p_nb_' + ap.code.toLowerCase()]}</td>
                                ))}
                            <td className="total">{nbAvisDecidables}</td>
                        </tr>
                        <tr>
                            <th>Nb décisions</th>
                            {nbDecisionsParAvis.map((dpa, index) => (
                                <td key={index}>{dpa}</td>
                            ))}
                            <td className="total">{nbTotalDecisions}</td>
                        </tr>
                    </tbody>
                </table> */}

                <h5>Organisme</h5>
                <div className="InfoGroup">
                    <div className="InfoColumn">
                        <InfoDisplay label="Département" text={props.poste.organisme_departement} />
                        <InfoDisplay label="Code FE" text={props.poste.organisme_FE} />
                        <InfoDisplay label="Code FE mère" text={props.poste.organisme_codeFeMere} />
                        <InfoDisplay label="Libellé" text={props.poste.organisme_libelle} />
                    </div>
                    <div className="InfoColumn">
                        <InfoDisplay label="Lieu" text={props.poste.organisme_lieu} />
                        <InfoDisplay label="Zone de défense" text={props.poste.organisme_zone_defense} />
                        <InfoDisplay label="Info REO" text={props.poste.organisme_infoReo} />
                    </div>
                </div>

                <h5>Poste</h5>
                <div className="InfoGroup">
                    <div className="InfoColumn">
                        <InfoDisplay label={'Numéro de poste'} text={props.poste.poste_id} />
                        <InfoDisplay label="Domaine" text={getDomaineProperty(appConfig.donneesReference, props.poste.poste_domaine, 'code')} />
                        <InfoDisplay label="Filière" text={getFiliereProperty(appConfig.donneesReference, props.poste.poste_filiere, 'code')} />
                        <InfoDisplay label="NF" text={props.poste.poste_NF} />
                    </div>
                    <div className="InfoColumn">
                        <InfoDisplay label="ETR" text={props.poste.poste_ETR} />
                        <InfoDisplay label="Compétence requise" text={libellesCompetences.join(' ; ')} />
                        <InfoDisplay label={'CIAT'} text={props.poste.poste_CIAT ? 'CIAT' : ''} />
                        <InfoDisplay label={'PPE / SHM / ITD'} text={props.poste.poste_specifique} />
                    </div>
                </div>

                <h5>Avis</h5>
                <div className="InfoGroup">
                    <div className="InfoColumn">
                        <InfoDisplay label="Priorité du poste DRHAT" text={props.poste.priorite_drhat} />
                        <InfoDisplay label="Priorité du poste pour la FE" text={props.poste.priorite_fe} />
                        <InfoDisplay label="Direct / Commissionné" text={props.poste.decisions_administre_id_pam} />
                    </div>
                </div>              
            </div>
        </>
    );
});

export default SynthesePoste;
