import { observer } from 'mobx-react';
import React, { useContext } from 'react';
import { NavLink } from 'react-router-dom';
import { NAVIGATION, PROFILS } from '../../constantes/constantes';
import AppConfigStore, { AppConfigContext } from '../../stores/AppConfigStore';
import './GestionDecisionBarreNavParamsActions.scss';
import ParametresGestionAffichage from './ParametresGestionAffichage';
import ZoneCalculs from './ZoneCalculs';

/**
 * Composant de la barre d'en-tête commune aux différentes vues d'Ogure NG, permettant :
 * - La navigation entre les vues
 * - Le paramétrage de la vue sélectionnée
 * - Le lancement des calculs
 *
 * @component
 * @example
 * return (
 * <GestionDecisionBarreNavParamsActions />
 * )
 */
const GestionDecisionBarreNavParamsActions = observer(() => {
    /** @type {AppConfigStore} */
    const appConfig = useContext(AppConfigContext);
    const hasSousVivier = appConfig.sousViviersUtilisateurConnecte.length > 0; // choix des sous-viviers
    const isSuper = !appConfig.profilSelectionne && appConfig.hasProfil(PROFILS.SUPER);
    const isDecision = true ? appConfig.idsSousViviersSelectionnees.length==1 : false;

    
    return (
        <nav className="GestionDecisionBarreNavParamsActions d-flex flex-row NOjustify-content-between align-items-center px-2 py-2">
            <div className="btn-group px-2" role="group">
                {[PROFILS.PCP, PROFILS.FILIERE, PROFILS.BVT].includes(appConfig.profilSelectionne) && (
                    <NavLink to={NAVIGATION.PERIMETRE} className="btn btn-primary d-flex align-items-center">
                        Mon périmètre
                    </NavLink>
                )}
                {appConfig.profilSelectionne === PROFILS.FILIERE && isDecision && (
                        <NavLink to={NAVIGATION.GESTION_DECISIONS} className="btn btn-primary d-flex align-items-center">
                            Aide à la décision
                        </NavLink>
                )}
                {[PROFILS.ITD, PROFILS.FILIERE, PROFILS.PCP].includes(appConfig.profilSelectionne) && (
                    <NavLink to={'/gestionITD'} className="btn btn-primary d-flex align-items-center">
                        ITD
                    </NavLink>
                )}
                {/* {![PROFILS.ITD, PROFILS.BVT].includes(appConfig.profilSelectionne) && (
                    <NavLink to={NAVIGATION.INDICATEURS} className="btn btn-primary d-flex align-items-center">
                        Indicateurs
                    </NavLink>
                )} */}
            </div>
            <ParametresGestionAffichage />
            <div className="d-flex flex-row ml-auto align-items-center actions">
                {(hasSousVivier && appConfig.profilSelectionne === PROFILS.FILIERE) && <ZoneCalculs />}
                {/*
                <div className="mr-4">
                    <GoSettings size={22} />
                </div>
                <div className="mr-2">
                    <BsThreeDotsVertical size={22} />
                </div>
                */}
            </div>
        </nav>
    );
});

export default GestionDecisionBarreNavParamsActions;
