import React, { useContext, useEffect, useState } from 'react';
import './Indicateurs.scss';
import AppConfigStore, { AppConfigContext } from '../../stores/AppConfigStore';
import { observer } from 'mobx-react';
import { SUIVI_PAM_GESTIONNAIRE, TAUX_ARMEMENT_FE } from '../../constantes/constantes';
import IndicateurAvisGestionnaire from './IndicateursSuiviGestionnaire/IndicateurAvisGestionnaire';
import IndicateurDecisionGestionnaire from './IndicateursSuiviGestionnaire/IndicateurDecisionGestionnaire';
import IndicateurTauxArmementActuel from './IndicateursTauxArmement/IndicateurTauxArmementActuel';
import IndicateurTauxArmementProjection from './IndicateursTauxArmement/IndicateurTauxArmementProjection';
import Filtres from './Filtres';
import { Button } from 'react-bootstrap';
import IndicateursManager from '../../data-manager/IndicateursManager';
import { Chargement } from '../Commun/Chargement';
import { toast } from 'react-toastify';
import dayjs from 'dayjs';
import ChoixFESelect from './Commun/ChoixFESelect';

/**
 * Composant principal de la vue "Indicateurs".
 *
 * @component
 */
const Indicateurs = observer((props) => {
    /** @type {AppConfigStore} */
    const appConfig = useContext(AppConfigContext);

    // Filtres sélectionnés pour chaque type d'indicateurs (PAM Gestionnaire, Taux Armement)
    const [filtresPAMGestionnaire, setFiltresPAMGestionnaire] = useState([[], [], [], []]);
    const [filtresTauxArmement, setFiltresTauxArmement] = useState([[], [], [], []]);


    const [filtresMAJ, setFiltresMAJ] = useState(false);

    // Choix FE
    const [FEsSelected, setFEsSelected] = useState([]);

    // Données filtrées récupérées actualisées après chaque filtrage
    const [data, setData] = useState();

    // Date et heure du jour
    let now = dayjs();
    const [date, setDate] = useState(now.format('DD/MM/YYYY'));
    const [time, setTime] = useState(now.format('HH:mm'));

    let indicateursManager = new IndicateursManager();

    // Fonction retournant la liste des filtres correspondant au type d'indicateurs sélectionné (PAM Gestionnaire, PAM PCP, Taux Armement)
    const getFiltresToDisplay = () => {
        return appConfig.typeIndicateurs === SUIVI_PAM_GESTIONNAIRE ? filtresPAMGestionnaire : filtresTauxArmement;
    };

    // FEs du PCP
    const fesPCP = appConfig.groupeFePCP.map((fe) => {
        return { value: fe.code, label: fe.code + ' (' + fe.libelle + ')' };
    });

    // Fonction asynchrone récupérant les données filtrées depuis le backend
    const applyFiltres = async (filtres) => {
        const baseFilters = {
            type: appConfig.typeIndicateurs,
            sv_id: appConfig.idSousVivierSelectionne,
            d_code: filtres[1],
            f_code: filtres[2],
            categorie: filtres[0],
            nf: filtres[3]
        };

        let result;
        try {
            if (appConfig.typeIndicateurs === TAUX_ARMEMENT_FE) {
                const filters = { ...baseFilters, fe_id: FEsSelected };
                // En affichage PCP, on ne renvoie pas de sous-vivier pour avoir les données globales
                filters.sv_id = appConfig.affichagePCP ? [] : appConfig.idSousVivierSelectionne;
                result = await indicateursManager.fetchFiltresResults(filters);
                setData(result?.data);
            } else if (appConfig.typeIndicateurs !== TAUX_ARMEMENT_FE) {
                result = await indicateursManager.fetchFiltresResults({ ...baseFilters, vue: appConfig.vueIndicateursPAM });
                setData(result?.data);
            }
        } catch (e) {
            console.error(e);
            toast.error("Une erreur est survenue lors de l'application des filtres sélectionnés. Veuillez contacter un administrateur.", {
                autoClose: false
            });
        }
        if (result && result?.data) {
            now = dayjs();
            setDate(now.format('DD/MM/YYYY'));
            setTime(now.format('HH:mm:ss'));
        }
        appConfig.setLoadingPCP(false);
    };

    // Actualisation des données filtrées lorsque l'on change de type d'indicateurs ou de FE
    useEffect(() => {
        setData(undefined);
        applyFiltres(getFiltresToDisplay());
    }, [appConfig.typeIndicateurs, appConfig.affichagePCP]);

    let indicateursAffiches;


    // Affichage des bons indicateurs lors du changement de type d'indicateurs
    switch (appConfig.typeIndicateurs) {
        case SUIVI_PAM_GESTIONNAIRE:
            indicateursAffiches = [
                <IndicateurAvisGestionnaire appConfig={appConfig} data={data} />,
                <IndicateurDecisionGestionnaire appConfig={appConfig} data={data} />
            ];

            //Sauvegarde des filtres Indicateurs de l'onglet PAM Gestionnaire

            useEffect(()=>{
                const data=localStorage.getItem("filtres_PAM");
                if (data){
                    setFiltresPAMGestionnaire(JSON.parse(data))
                }
            },[]);

            useEffect(()=>{
                localStorage.setItem("filtres_PAM",JSON.stringify(filtresPAMGestionnaire))
            });

            break;

        case TAUX_ARMEMENT_FE:
            indicateursAffiches = [
                <IndicateurTauxArmementActuel appConfig={appConfig} data={data} />,
                <IndicateurTauxArmementProjection appConfig={appConfig} data={data} />
            ];

            useEffect(()=>{
                const data=localStorage.getItem("filtres_TA");
                if (data){
                    setFiltresTauxArmement(JSON.parse(data))
                }
            },[]);

            useEffect(()=>{
                localStorage.setItem("filtres_TA",JSON.stringify(filtresTauxArmement))
            });
            break;
    }

    return (
        <div className="VueIndicateurs">
            <div className="CompartimentFiltres">
                {appConfig.typeIndicateurs === TAUX_ARMEMENT_FE && (
                    <>
                        <h3 className="FiltresHeader">Choix de la ou des FE(s)</h3>
                        <div className="FiltreFE">
                            <ChoixFESelect
                                appConfig={appConfig}
                                value={FEsSelected}
                                setValues={(newValue) => setFEsSelected(newValue)}
                                disabled={!data}
                            />
                            {appConfig.groupeFePCP.length > 0 && (
                                <div className="SelectionnerFEBouton">
                                    {data && (
                                        <a
                                            href="#"
                                            className="link-primary"
                                            style={{ pointerEvents: 'auto', cursor: 'pointer' }}
                                            onClick={() => {
                                                if (fesPCP) {
                                                    setFEsSelected(fesPCP);
                                                }
                                            }}
                                        >
                                            Sélectionner mes FE
                                        </a>
                                    )}
                                </div>
                            )}
                        </div>
                    </>
                )}
                <h3 className="FiltresHeader">Filtre(s)</h3>
                <div className="FiltresSelects">
                    <Filtres
                        appConfig={appConfig}
                        disabled={!data}
                        filtres={getFiltresToDisplay()}
                        isSuiviPAMGestionnaire={appConfig.typeIndicateurs === SUIVI_PAM_GESTIONNAIRE}
                        setFiltres={(newValues) => {
                            setFiltresMAJ(true);

                            //Application de la sauvegarde

                            setFiltresTauxArmement(newValues);
                            setFiltresPAMGestionnaire(newValues);

                            /*
                            switch (appConfig.typeIndicateurs) {
                                case SUIVI_PAM_GESTIONNAIRE:
                                    setFiltresPAMGestionnaire(newValues);
                                    break;

                                case TAUX_ARMEMENT_FE:
                                    setFiltresTauxArmement(newValues);
                                    break;

                                default:
                                    console.error("Type d'indicateurs inconnu : " + appConfig.typeIndicateurs);
                            }
                        */}}
                    />

                    <p className="DateFiltered">
                        Vue mise à jour le <strong>{date}</strong> à <strong>{time}</strong>
                    </p>

                    <Button
                        disabled={!data || !filtresMAJ}
                        className={'ActualiserBouton'}
                        variant="primary"
                        onClick={() => {
                            setData(undefined);
                            applyFiltres(getFiltresToDisplay());
                            toast.success('Les indicateurs ont bien été actualisés.');
                        }}
                    >
                        Actualiser les indicateurs
                    </Button>
                </div>
            </div>
            <div className="CompartimentIndicateurs">
                <div className="IndicateursGroup">
                    <div className="IndicateurBox">
                        {data && indicateursAffiches[0]}
                        {!data && (
                            <div style={{ height: '80vh' }}>
                                <Chargement />
                            </div>
                        )}
                    </div>
                    <div className="IndicateurBox">
                        {data && indicateursAffiches[1]}
                        {!data && (
                            <div style={{ height: '80vh' }}>
                                <Chargement />
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
});

export default Indicateurs;
