import React from 'react';
import NombreDisplay from '../Commun/NombreDisplay';
import dayjs from 'dayjs';
import './IndicateurTauxArmementActuel.scss';
import GenericBar from '../Commun/GenericBar';

/**
 * Composant présentant les effectifs actuels d'une ou plusieurs FE.
 *
 * @component
 * @param {object} props.appConfig - Contexte MobX
 * @param {object} props?.data - Données à afficher dans l'indicateur
 */
const IndicateurTauxArmementActuel = (props) => {
    const now = dayjs();

    const dataFEActuel = [
        {
            item: 'Militaires (actuel)',
            Militaires: props.data.nb_militaires_actuel || 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 actuels au {now.format('DD/MM/YYYY')}</h3>
            <div className="Nombres">
                <NombreDisplay
                    nombre={props?.data.nb_militaires_actuel}
                    label="Nombre de militaires dans la/les FE"
                    color={'#416baa'}
                    height={'150px'}
                    width={'300px'}
                />
                <NombreDisplay
                    nombre={props?.data.nb_postes_actuel}
                    label="Nombre de postes dans la/les FE"
                    color={'#c26f00'}
                    height={'150px'}
                    width={'300px'}
                />
            </div>
            <div className="Nombres">
                <NombreDisplay
                    nombre={props?.data.ecart_actuel}
                    label="Ecart Postes/Administrés"
                    color={'#974d76'}
                    height={'150px'}
                    width={'300px'}
                />
                <NombreDisplay
                    nombre={
                        props?.data.taux_armement_actuel !== 0 && props?.data.taux_armement_actuel
                            ? props?.data.taux_armement_actuel.toFixed(2) + '%'
                            : '0%'
                    }
                    label="Taux d'armement actuel"
                    color={'#000000'}
                    height={'150px'}
                    width={'300px'}
                />
            </div>
            <GenericBar data={dataFEActuel} height="350px" keys={['Postes', 'Militaires']} axisYLegend={'Nombre de militaires / postes'} />
        </>
    );
};

export default IndicateurTauxArmementActuel;
