import { observer } from 'mobx-react';
import React, { useContext, useEffect, useState } from 'react';
import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
import useSWR from 'swr';
import { LISTE_TYPE_SUGGESTIONS } from '../../../constantes/constantes';
import AppConfigStore, { AppConfigContext } from '../../../stores/AppConfigStore';
import { Chargement } from '../../Commun/Chargement';
import { Erreur } from '../../Commun/Erreur';
import AGGridConfigurationAdministres from '../../Commun/listes/configuration/AGGridConfigurationAdministres';
import ListeAffectations from '../Commun/ListeAffectations';
import './ListeAffectationsSuggereesPoste.scss';

/**
 * Composant présentant les affectations (administrés) suggérées par les algorithmes de classement et de matching pour le poste sélectionné
 * dans la vue d'aide à la décision, sous forme de 2 listes présentées dans 2 onglets :
 * - Liste des matchings parfaits
 * - Top N
 *
 * @component
 */
export const ListeAffectationsSuggereesPoste = observer(({ context }) => {
    /** @type {AppConfigStore} */
    const appConfig = useContext(AppConfigContext);

    const agGridConfigurationAdministres = new AGGridConfigurationAdministres(appConfig.donneesReference);

    const affectationsSuggereesFields = agGridConfigurationAdministres.buildAffectationPostesColumnDefs([
        'rang',
        {
            groupId: 'identite',
            columns: [
                {
                    colId: 'identite_matricule',
                    override: { filter: false, width: 80 }
                },
                {
                    colId: 'identite_grade',
                    override: { filter: false}
                },
                {
                    colId: 'identite_nom',
                    override: { filter: false }
                },
                {
                    colId: 'identite_prenom',
                    override: { filter: false }
                },
                {
                    colId: 'identite_anciennete_grade',
                    override: { filter: false }
                },
            ]
        },
        {
            groupId: 'competences_NonEditable',
            columns: [{ colId: 'competences_competences', override: { headerName: 'Compétences', width: 120 } }]
        },
        {
            groupId: 'PAMEnCours_NonEditable',
            columns: [
                {
                    colId: 'PAMEnCours_notesUtilisateur',
                    override: { filter: false }
                },
                {
                    colId: 'PAMEnCours_marques',
                    override: { filter: false }
                },
            ]
        },
        {
            groupId: 'decision_NonEditable',
            columns: [
                {
                    colId: 'PAMEnCours_avis',
                    override: { filter: false }
                },
                {
                    colId: 'decision_decision',
                    override: { filter: false }
                },
                {
                    colId: 'decision_notesUtilisateur',
                    override: { filter: false }
                },
                {
                    colId: 'decision_ciat',
                    override: { filter: false }
                },
                {
                    colId: 'decision_specifique',
                    override: { filter: false }
                }
            ]
        },
        {
            groupId: 'affectationFuture_NonEditable',
            columns: [
                {
                    colId: 'affectationFuture_FE',
                    override: { filter: false }
                },
                {
                    colId: 'affectationFuture_libelle',
                    override: { filter: false }
                },
                {
                    colId: 'affectationFuture_lieu',
                    override: {
                        filter: false,
                        columnGroupShow: 'close',
                    }
                }
            ]
        },
        'classement'
    ]);

    const annee = appConfig.PAMSelectionne;
    const params = {};
    annee && (params.pam__in = annee);
    const getKey = () => appConfig.managers.postes.buildRankingFetchKey(appConfig.selectedPosteDecision.id_pam, params);
    const { data, error } = useSWR(getKey);

    const [topN, setTopN] = useState(undefined);
    const [matchingParfait, setMatchingParfait] = useState(undefined);

    useEffect(() => {
        console.log('useEffect ListeAffectationsSuggereesPoste', data);

        if (data) {
            // Liste des administrés du matching parfait
            const tempMP = agGridConfigurationAdministres.adapteAffectationAdministresSuggereesPourPoste(
                data.filter((d) => d.no_flag_cple_ideal === true)
            );
            console.log('matchingParfait', tempMP);
            setMatchingParfait(tempMP);

            // Liste des administrés du top N
            const tempTopN = agGridConfigurationAdministres.adapteAffectationAdministresSuggereesPourPoste(data);
            //TODO ne conserver que les N éléments où N = Math.max(10, nb affectables) ?
            console.log('Top N', tempTopN);
            setTopN(tempTopN);
        }
    }, [data]);

    return (
        <div className="ListeAffectationsSuggereesPoste">
            <h3 className="AffectationSuggereesHeader">Affectations suggérées par les algorithmes de matching parfait et de classement</h3>

            <Tabs>
                <TabList>
                    <Tab>Matching parfait</Tab>
                    <Tab>Classement</Tab>
                </TabList>

                <TabPanel>
                    {!matchingParfait ? (
                        error ? (
                            <Erreur />
                        ) : (
                            <Chargement />
                        )
                    ) : matchingParfait?.length ? (
                        <ListeAffectations
                            columnDefs={affectationsSuggereesFields}
                            data={matchingParfait}
                            nbItems={matchingParfait.length}
                            context={{ ...context, ...{ listeType: LISTE_TYPE_SUGGESTIONS, listeVariante: 'MP' } }}
                        />
                    ) : (
                        <p>Il n'existe aucun matching parfait d'administré pour ce poste.</p>
                    )}
                </TabPanel>

                <TabPanel>
                    {!topN ? (
                        error ? (
                            <Erreur />
                        ) : (
                            <Chargement />
                        )
                    ) : topN?.length ? (
                        <ListeAffectations
                            columnDefs={affectationsSuggereesFields}
                            data={topN}
                            nbItems={topN.length}
                            context={{ ...context, ...{ listeType: LISTE_TYPE_SUGGESTIONS, listeVariante: 'TopN' } }}
                        />
                    ) : (
                        <p>Aucun résultat</p>
                    )}
                </TabPanel>
            </Tabs>
        </div>
    );
});
