import React from 'react';
import './IndicateursAvisGestionnaire.scss';
import NombreDisplay from '../Commun/NombreDisplay';
import { ADMINISTRES, POSTES } from '../../../constantes/constantes';
import GenericPie from '../Commun/GenericPie';
import { observer } from 'mobx-react';

/**
 * Composant présentant les indicateurs sur les avis émis par le gestionnaire.
 *
 * @component
 * @param {object} props.appConfig - Contexte MobX
 * @param {object} props?.data - Données à afficher dans l'indicateur
 */
const IndicateurAvisGestionnaire = observer((props) => {
    //TODO s'assurer que les couleurs sont en cohérence avec celles définies dans donnees-de-reference.css
    const dataAdministres = [
        {
            id: 'A muter',
            value: props?.data ? props?.data.nb_a_muter : 0,
            color: 'hsl(97,40%,40%)'
        },
        {
            id: 'A étudier',
            value: props?.data ? props?.data.nb_a_etudier : 0,
            color: 'hsl(221,49%,40%)'
        },
        {
            id: 'A maintenir',
            value: props?.data ? props?.data.nb_a_maintenir : 0,
            color: 'hsl(279,91%,40%)'
        },
        {
            id: 'Non étudié',
            value: props?.data ? props?.data.nb_non_etudie_administres : 0,
            color: 'hsl(0,91%,40%)'
        },
        {
            id: 'Partant',
            value: props?.data ? props?.data.nb_a_partant : 0,
            color: 'hsl(35,91%,40%)'
        },
        {
            id: 'Non disponible',
            value: props?.data ? props?.data.nb_a_non_dispo : 0,
            color: 'hsl(0,0%,40%)'
        }
    ];

    //TODO s'assurer que les couleurs sont en cohérence avec celles définies dans donnees-de-reference.css
    const dataPostes = [
        {
            id: 'Priorité 1',
            value: props?.data ? props?.data.nb_p1 : 0,
            color: 'hsl(0,97%,31%)'
        },
        {
            id: 'Priorité 2',
            value: props?.data ? props?.data.nb_p2 : 0,
            color: 'hsl(49,100%,42%)'
        },
        {
            id: 'Priorité 3',
            value: props?.data ? props?.data.nb_p3 : 0,
            color: 'hsl(116,100%,29%)'
        },
        {
            id: 'Priorité 4',
            value: props?.data ? props?.data.nb_p4 : 0,
            color: 'hsl(199,100%,32%)'
        },
        {
            id: 'Non étudié',
            value: props?.data ? props?.data.nb_non_etudie_postes : 0,
            color: 'hsl(282,100%,32%)'
        },
        {
            id: 'Gelé',
            value: props?.data ? props?.data.nb_gele : 0,
            color: 'hsl(171,25%,52%)'
        }
    ];

    return (
        <>
            <h3 className="Header">Avis</h3>

            {props.appConfig.vueIndicateursPAM === ADMINISTRES && (
                <div className="Nombres">
                    {dataAdministres.map((a) => (
                        <NombreDisplay key={a.id} nombre={a.value} label={a.id} color={a.color} size="150px" />
                    ))}
                </div>
            )}

            {props.appConfig.vueIndicateursPAM === POSTES && (
                <div className="Nombres">
                    {dataPostes.map((a) => (
                        <NombreDisplay key={a.id} nombre={a.value} label={a.id} color={a.color} size="150px" />
                    ))}
                </div>
            )}

            <GenericPie data={props.appConfig.vueIndicateursPAM === ADMINISTRES ? dataAdministres : dataPostes} height="500px" />
        </>
    );
});

export default IndicateurAvisGestionnaire;
