import React from 'react';
import NombreDisplay from '../Commun/NombreDisplay';
import TauxArmementDisplay from '../Commun/TauxArmementDisplay';
import './IndicateurTauxArmementProjection.scss';
import NbMilitaireEtTendance from '../Commun/NbMilitaireEtTendance';
import GenericBar from '../Commun/GenericBar';
import i18n from '../../../i18n/i18n';

/**
 * Composant présentant les effectifs projetés d'une ou plusieurs FE.
 *
 * @component
 * @param {object} props.appConfig - Contexte MobX
 * @param {object} props?.data - Données à afficher dans l'indicateur
 */
const IndicateurTauxArmementProjection = (props) => {
    let today = new Date(Date.now());
    let datePAMActuel = new Date('August 1, ' + today.getFullYear());

    const dataFEProjection = [
        {
            item: 'Militaires (projeté)',
            Militaires: props?.data.nb_militaires_projete || 0,
            color: 'hsl(216,45%,46%)'
        },
        {
            item: 'Postes',
            Postes: props?.data.nb_postes_actuel || 0,
            color: 'hsl(34,100%,38%)'
        }
    ];

    return (
        <>
            <h3 className="Header">
                Effectifs projetés au 01/08/
                {today.getTime() > datePAMActuel.getTime() ? datePAMActuel.getFullYear() + 1 : datePAMActuel.getFullYear()}
            </h3>
            <div className="Nombres">
                <NombreDisplay
                    nombre={props?.data.nb_militaires_sortants}
                    isIncreasing={true}
                    label="Effectifs sortants (militaires)"
                    color={'#ba4747'}
                    height={'150px'}
                    width={'300px'}
                />
                <NombreDisplay
                    nombre={props?.data.nb_militaires_entrants}
                    label="Effectifs entrants (militaires)"
                    color={'#54974d'}
                    height={'150px'}
                    width={'300px'}
                />
            </div>
            <div className="Nombres">
                <NbMilitaireEtTendance
                    nombres={[props?.data.nb_militaires_projete, props?.data.nb_militaires_actuel]}
                    color={'#416baa'}
                    height={'150px'}
                    width={'300px'}
                />
                <TauxArmementDisplay
                    nombres={[
                        props?.data.taux_armement_projete ? props?.data.taux_armement_projete.toFixed(2) : 0,
                        props?.data.taux_armement_cible ? props?.data.taux_armement_cible.toFixed(2) : i18n.global.donnees.vide
                    ]}
                    color={'#000000'}
                    height={'150px'}
                    width={'300px'}
                />
            </div>
            <GenericBar data={dataFEProjection} height="350px" keys={['Postes', 'Militaires']} axisYLegend={'Nombre de militaires / postes'} />
        </>
    );
};

export default IndicateurTauxArmementProjection;
