import React, { useEffect, useState } from 'react';
import { ReactSVG } from 'react-svg';
import { ADMINISTRES, AFFECTATIONS, POSTES } from '../../../../constantes/constantes';
import { getRefs } from '../../listes/commonAGGridFunctions';
import { createMarquesComparator } from '../../listes/helpers/business-data-helpers';
import './MarquesEditor.scss';

/**
 * Composant d'édition d'un ensemble de marques.
 *
 * @component
 * @param {import('../../../../jsdoc/types').ContexteAgGrid} props.context - Le contexte d'affichage de la liste
 * @param {string} props.typeDonnees - Type de données pour les  marques (ADMINISTRES, POSTES ou AFFECTATIONS)
 * @param {string} props.marques - Les marques à afficher/modifier
 * @param {void} props.setMarques - Setter pour modifier la valeur des marques
 * @param {string} props.titre - Titre éventuel
 * @example
 * return (
 * <MarquesEditor />
 * )
 */
const MarquesEditor = (props) => {
    const [marques, setMarques] = useState(props.marques || []);

    //console.log('MarquesEditor init', props.marques, marques);

    useEffect(() => {
        //console.log('MarquesEditor useEffect', props.marques, marques);
        props.setMarques(marques || []);
    }, [marques]);

    // ------------------------------------------------------------------------------------------------------------------------------

    const refs = getRefs(props);

    // Liste des groupes concernés à afficher
    const groupesMarques = refs?.groupesMarques?.filter((groupeMarques) => {
        if (groupeMarques.length === 0) {
            return false;
        }

        switch (props.typeDonnees) {
            case ADMINISTRES:
                return groupeMarques.type === 'C' || groupeMarques.type === 'M';
            case POSTES:
                return groupeMarques.type === 'P';
            case AFFECTATIONS:
                return groupeMarques.type === 'C' || groupeMarques.type === 'A';
            default:
                console.warn('Type de données inconnu : ' + props.typeDonnees);
                return false;
        }
    });

    /**
     Ajoute ou retire une marque de la liste des marques. S'il existe déjà une marque de même groupe dans la liste, celle-ci est retirée.
     @param {Object} marqueSel - la marque à ajouter/retirer de la liste
     */
    const toggleMarque = (marqueSel) => {
        const ajouterMarque = !marques.includes(marqueSel.id);
        let marquesCopie = [...marques];

        // On retire toutes les marques du même groupe si le groupe n'est pas en sélection multiple
        if (!refs?.groupesMarquesById.get(marqueSel.groupeMarquesId).selectionMultiple) {
            for (const marque of refs?.groupesMarquesById.get(marqueSel.groupeMarquesId).marques) {
                const index = marquesCopie.indexOf(marque.id);
                if (index !== -1) {
                    marquesCopie.splice(index, 1);
                }
            }
        } else if (refs?.groupesMarquesById.get(marqueSel.groupeMarquesId).selectionMultiple && !ajouterMarque) {
            const index = marquesCopie.indexOf(marqueSel.id);
            if (index !== -1) {
                marquesCopie.splice(index, 1);
            }
        }

        // S'il faut ajouter la marque sélectionnée, on l'ajoute
        if (ajouterMarque) {
            marquesCopie.push(marqueSel.id);
        }

        // On trie la liste des marques par ordre des groupes, puis par marque au sein d'un groupe
        marquesCopie.sort(createMarquesComparator(getRefs(props)));

        // Mise à jour des marques
        setMarques(marquesCopie);
    };

    return (
        <div className="MarquesEditor">
            {props.titre && <p className="titre">{props.titre}</p>}

            <ul>
                {groupesMarques.map((groupe) => {
                    if (!groupe.marques || !groupe.marques.length) return;

                    return (
                        <li key={groupe.id}>
                            <div className="titre">{groupe.libelle}</div>
                            <ul>
                                {groupe.marques.map((marque) => {
                                    const code = groupe.code + '_' + marque.code;
                                    const selected = marques.includes(marque.id);

                                    return (
                                        <li
                                            key={marque.id}
                                            onClick={(e) => {
                                                e.preventDefault();
                                                toggleMarque(marque);
                                            }}
                                        >
                                            <ReactSVG
                                                src={'assets/images/marques/' + code + '.svg'}
                                                className={'pictoMarque ' + code + (selected ? ' selected' : '')}
                                                wrapper="span"
                                                title={marque.libelle}
                                            />
                                        </li>
                                    );
                                })}
                            </ul>
                        </li>
                    );
                })}
            </ul>

            <div className="actions">
                <a
                    href="#"
                    onClick={(e) => {
                        e.preventDefault();
                        setMarques([]);
                    }}
                >
                    Effacer toutes les marques
                </a>
            </div>
        </div>
    );
};

export default MarquesEditor;
