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

/**
 * Composant présentant les indicateurs sur les décisions faites par le gestionnaire.
 *
 * @component
 * @param {object} props.appConfig - Contexte MobX
 * @param {object} props?.data - Données à afficher dans l'indicateur
 */
const IndicateurDecisionGestionnaire = observer((props) => {
    //TODO s'assurer que les couleurs sont en cohérence avec celles définies dans donnees-de-reference.css
    const dataAdministres = [
        {
            id: 'Pré-positionné',
            value: props?.data ? props?.data.nb_prepos_administres : 0,
            color: 'hsl(187,97%,31%)'
        },
        {
            id: 'Positionné',
            value: props?.data ? props?.data.nb_pos_administres : 0,
            color: 'hsl(296,100%,42%)'
        },
        {
            id: 'OMI en cours',
            value: props?.data ? props?.data.nb_omi_en_cours_administres : 0,
            color: 'hsl(0,100%,22%)'
        },
        {
            id: 'OMI activé',
            value: props?.data ? props?.data.nb_omi_active_administres : 0,
            color: 'hsl(118,100%,32%)'
        }
    ];

    //TODO s'assurer que les couleurs sont en cohérence avec celles définies dans donnees-de-reference.css
    const dataPostes = [
        {
            id: 'Pré-positionné',
            value: props?.data ? props?.data.nb_prepos_postes : 0,
            color: 'hsl(187,97%,31%)'
        },
        {
            id: 'Positionné',
            value: props?.data ? props?.data.nb_pos_postes : 0,
            color: 'hsl(296,100%,42%)'
        },
        {
            id: 'OMI en cours',
            value: props?.data ? props?.data.nb_omi_en_cours_postes : 0,
            color: 'hsl(0,100%,22%)'
        },
        {
            id: 'OMI activé',
            value: props?.data ? props?.data.nb_omi_active_postes : 0,
            color: 'hsl(118,100%,32%)'
        }
    ];

    return (
        <div>
            <h3 className="Header">Décision</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={'380px'} />
            <div className="RectangleParent">
                <div className="ResteARealiser">
                    <h5 className="ChiffresHeader">Reste à réaliser</h5>
                    <div className="Chiffres">
                        <h2>
                            <strong>
                                {props?.data
                                    ? props.appConfig.vueIndicateursPAM === ADMINISTRES
                                        ? props?.data.reste_a_realiser_administres
                                        : props?.data.reste_a_realiser_postes
                                    : '0'}
                            </strong>
                        </h2>

                        {props.appConfig.vueIndicateursPAM === ADMINISTRES && (
                            <div className="ChiffresAdministres">
                                <h6>
                                    <strong>{props?.data ? props?.data.reste_a_realiser_a_etudier : '30'}</strong> A étudier
                                </h6>
                                <h6>
                                    <strong>{props?.data ? props?.data.reste_a_realiser_a_muter : '12'}</strong> A muter
                                </h6>
                            </div>
                        )}

                        {/* TODO Restes à réaliser non cohérents car calculés de manière globale
                            props.appConfig.vueIndicateursPAM === POSTES && (
                            <div className="ChiffresPostes">
                                <div>
                                    <h6>
                                        <strong>{props?.data ? props?.data.reste_a_realiser_p1 : '5'}</strong> Priorité 1
                                    </h6>
                                    <h6>
                                        <strong>{props?.data ? props?.data.reste_a_realiser_p2 : '3'}</strong> Priorité 2
                                    </h6>
                                </div>
                                <div>
                                    <h6>
                                        <strong>{props?.data ? props?.data.reste_a_realiser_p3 : '30'}</strong> Priorité 3
                                    </h6>
                                    <h6>
                                        <strong>{props?.data ? props?.data.reste_a_realiser_p4 : '95'}</strong> Priorité 4
                                    </h6>
                                </div>
                            </div>
                        )*/}
                    </div>
                </div>
            </div>
        </div>
    );
});

export default IndicateurDecisionGestionnaire;
