import { observer } from 'mobx-react';
import React, { useContext } from 'react';
import { useLocation } from 'react-router-dom';
import Select from 'react-select';
import { ADMINISTRES, ADMINISTRES_POSTES, POSTES, PROFILS, SUIVI_PAM_GESTIONNAIRE, TAUX_ARMEMENT_FE } from '../../constantes/constantes';
import { comparer } from '../../helpers/comparators';
import { getLibelleProfil } from '../../helpers/i18n-helper';
import AppConfigStore, { AppConfigContext } from '../../stores/AppConfigStore';
import { GenericNavigationSelect } from './GenericNavigationSelect';
import './NavStyles.scss';
import { useEffect, useState } from 'react';
/**
 * Composant permettant de paramétrer la vue sélectionnée, présenté dans la barre d'en-tête de chaque vue.
 *
 * @component
 * @example
 * return (
 * <ParametresGestionAffichage />
 * )
 */
const ParametresGestionAffichage = observer(() => {
    const location = useLocation();
    /** @type {AppConfigStore} */
    const appConfig = useContext(AppConfigContext);
    const hasSousVivier = appConfig.sousViviersUtilisateurConnecte.length > 0; // choix des sous-viviers

    console.log('where are we?', location.pathname);

    const profilChoix = appConfig.profilsSelectionnables.map((p) => ({ id: p, label: getLibelleProfil(p) ?? p }));
    profilChoix.sort((a, b) => comparer(a.label, b.label));

    // choix de l'affichage Postes/Administrés/Postes et administrés
    const affichageMultipleChoix = [
        { id: ADMINISTRES_POSTES, label: 'Administrés et postes' },
        { id: ADMINISTRES, label: 'Administrés seulement' },
        { id: POSTES, label: 'Postes seulement' }
    ];

    const affichageSousViviersChoix = appConfig.sousViviersUtilisateurConnecte; // choix des sous-viviers

    // choix de l'affichage Postes/Administrés pour l'aide à la décision et les indicateurs
    const affichageUniqueChoix = [
        { id: ADMINISTRES, label: 'Administrés' },
        { id: POSTES, label: 'Postes' }
    ];

    // choix du type d'indicateurs dans la vue Indicateurs
    const typeIndicateursChoix = [
        { id: TAUX_ARMEMENT_FE, label: "Taux d'armement FE" },
        { id: SUIVI_PAM_GESTIONNAIRE, label: 'Suivi du PAM (gestionnaire)' }
    ];

    // choix du type d'indicateurs dans la vue Indicateurs pour le PCP
    const typeIndicateursChoixPCP = [{ id: TAUX_ARMEMENT_FE, label: "Taux d'armement FE" }];

    // Sous-vivier sélectionné
    const sousVivierChoisi = affichageSousViviersChoix.find((af) => appConfig.idSousVivierSelectionne == af.sv_id);



    const sv_libelle = sousVivierChoisi ? sousVivierChoisi.sv_libelle : '';

    const optionsListeSousViviers = appConfig.sousViviersUtilisateurConnecte.map((val) => ({
        value: val.sv_id,
        label: val.sv_libelle,
    }))

    optionsListeSousViviers.sort((a,b) => comparer(a.label, b.label));
    const selectionListeSousViviers = optionsListeSousViviers.filter((val) => appConfig.idsSousViviersSelectionnees.includes(val.value));

    // Formations-emplois sélectionnées
    const optionsListeFe = appConfig.formationEmploisUtilisateurConnecte.map((val) => ({
        value: val.fe_mere_credo,
        label: val.fe_mere_credo + (val.fe_mere_la ? ` (${val.fe_mere_la})` : '')
    }));
    optionsListeFe.sort((a, b) => comparer(a.label, b.label));
    const selectionListeFe = optionsListeFe.filter((val) => appConfig.idsFormationsEmploisSelectionnees.includes(val.value));

    // Booléens pour savoir sur quelle vue on se situe
    const isPerimetre = location.pathname.includes('gestionPerimetre');
    const isPerimetre_pam = location.pathname.includes('gestionPerimetrePam');
    const isDecision = location.pathname.includes('Decision');
    const isIndicateur = location.pathname.includes('indicateurs');

    // Fonction de changement des filtres
    function changeFilters(newValue, typeFiltre) {
        const newValues = [];
        Filters.forEach((f) => newValues.push(f));
        switch (typeFiltre) {
            case "SOUS_VIVIERS":
                newValues[0] = newValue;
                break;
            case "FE":
                newValues[1] = newValue;
                break;
        }
        setFilters(newValues);
    }

    // Persistence des filtres
    const [Filters, setFilters] = useState([]);

    useEffect (() => {
        const data = localStorage.getItem("filtres");
        if (data !== null) {
            // appConfig.setIdsSousViviersSelectionnees(data);
            setFilters(JSON.parse(data));
        }
    }, []);
    // Fin de la persistence des filtres

    useEffect (() => {
        localStorage.setItem("filtres", JSON.stringify(Filters));
        appConfig.setIdsSousViviersSelectionnees(Filters[0]);
        appConfig.setIdsFormationsEmploisSelectionnees(Filters[1]);
    }, [Filters]);

    return (
        <div className={'d-flex flex-row align-items-center px-2 flex-grow-1'}>
            {profilChoix.length > 1 && (
                <GenericNavigationSelect
                    selectChoix={profilChoix}
                    selectId={'affichageProfils'}
                    selectLabel={'Profil'}
                    setValue={(value) => {
                        appConfig.setProfilSelectionne(value);
                        // const affichageSousViviersChoix = appConfig.sousViviersUtilisateurConnecte;
                        // appConfig.setIdSousVivierSelectionne(affichageSousViviersChoix[0].sv_id)
                        // appConfig.setIdsSousViviersSelectionnees(affichageSousViviersChoix[0].sv_id)
                        }
                    }
                    value={appConfig.profilSelectionne}
                />
            )}
            {isPerimetre && (
                <GenericNavigationSelect
                    selectChoix={affichageMultipleChoix}
                    selectId={'affichageViviers'}
                    selectLabel={'Affichage'}
                    setValue={(value) => appConfig.setTypeVuePerimetre(value)}
                    // setValue={(value) => changeFilters(value,"AFFICHAGE")}
                    value={appConfig.typeVuePerimetre}
                />
            )}
            {isPerimetre &&  [PROFILS.FILIERE, PROFILS.BVT].includes(appConfig.profilSelectionne) && (
                <>
                    <label htmlFor="sousVivierSelect" className="ml-4 mb-0">
                        Sous-vivier
                    </label>
                    <div className="form-floating px-2 flex-grow-1">
                        <Select
                            id="sousVivierSelect"
                            isMulti
                            options={optionsListeSousViviers}
                            value={selectionListeSousViviers}
                            onChange={(selected) => changeFilters(selected.map(val => val.value) ?? [],"SOUS_VIVIERS")}
                            placeholder="Entrez le nom d'un sous-viviers ou sélectionnez-le dans la liste"
                            noOptionsMessage={() => "Aucun sous-vivier disponible"}
                        />
                    </div>
                </>
            )}
            {isPerimetre && appConfig.profilSelectionne === PROFILS.PCP && (
                <>
                    <label htmlFor="formationEmploiSelect" className="ml-4 mb-0">
                        Formation-emploi
                    </label>
                    <div className="form-floating px-2 flex-grow-1">
                        <Select
                            id="formationEmploiSelect"
                            isMulti
                            options={optionsListeFe}
                            value={selectionListeFe}
                            onChange={(selected) => changeFilters((selected.map(val => val.value) ?? []),"FE")}
                            placeholder="Entrez le nom d'une FE ou sélectionnez-la dans la liste"
                            noOptionsMessage={() => "Aucune FE disponible"}
                        />
                    </div>
                </>
            )}
            {isDecision && (
                <>
                    <GenericNavigationSelect
                        selectChoix={affichageUniqueChoix}
                        selectId={'affichageDecision'}
                        selectLabel={'Afficher'}
                        setValue={(value) => appConfig.setVueDecision(value)}
                        value={appConfig.vueDecision}
                    />

                    <label className="ml-4 mb-0">Sous-vivier&nbsp;:</label>
                    <strong className="ml-1 mb-0">{appConfig.idsSousViviersSelectionnees[0]}</strong>
                </>
            )}
            {isIndicateur && (
                <>
                    <GenericNavigationSelect
                        selectChoix={hasSousVivier ? typeIndicateursChoix : typeIndicateursChoixPCP}
                        selectId={'typeIndicateurs'}
                        selectLabel={'Type'}
                        setValue={(value) => appConfig.setTypeIndicateurs(value)}
                        value={appConfig.typeIndicateurs}
                    />
                    {appConfig.typeIndicateurs === SUIVI_PAM_GESTIONNAIRE && hasSousVivier && (
                        <>
                            <GenericNavigationSelect
                                selectChoix={affichageUniqueChoix}
                                selectId={'affichageIndicateurs'}
                                selectLabel={'Afficher'}
                                setValue={(value) => appConfig.setVueIndicateursPAM(value)}
                                value={appConfig.vueIndicateursPAM}
                            />

                            <label className="ml-4 mb-0">Sous-vivier&nbsp;:</label>
                            <strong className="ml-1 mb-0">{sv_libelle}</strong>
                        </>
                    )}
                    {appConfig.hasProfil(PROFILS.PCP) && appConfig.typeIndicateurs === TAUX_ARMEMENT_FE && (
                        <>
                            {hasSousVivier && (
                                <div className="d-flex flex-row">
                                    <label htmlFor="afficherFEPCP" className="ml-4 mb-0">
                                        Affichage BMOB
                                    </label>
                                    <div className="form-floating px-2" style={{ marginTop: '3px' }}>
                                        <input
                                            type="checkbox"
                                            id="afficherFEPCP"
                                            name="afficherFEPCP"
                                            onChange={() => {
                                                appConfig.setLoadingPCP(true);
                                                appConfig.setAffichagePCP(!appConfig.affichagePCP);
                                            }}
                                            checked={appConfig.affichagePCP}
                                            disabled={appConfig.loadingPCP}
                                        />
                                    </div>
                                </div>
                            )}
                        </>
                    )}
                </>
            )}
        </div>
    );
});
export default ParametresGestionAffichage;
