import React from 'react';
import { ReactSVG } from 'react-svg';
import { getRefs } from '../listes/commonAGGridFunctions';
import './MarquesRenderer.scss';

/**
 * Renderer d'affichage d'un ensemble de marques dans une cellule d'une liste AG Grid.
 *
 * @component
 * @param {string} props.marques - Les marques à afficher
 * @param {void} props.modeFiltre - Permet de savoir si on doit filtrer ou non
 * @param {void} props.context - Le contexte d'affichage de la liste avec les données de référence
 * @example
 * return (
 * <MarquesRenderer />
 * )
 */
const MarquesRenderer = (props) => {
    return (
        <div className="MarquesRenderer">
            <div className="Marques text-ellipsis">
                {props.marques.map((m) => {
                    const refs = getRefs(props);
                    const marque = refs?.marquesById?.get(m);
                    // On ignore les marques qui ne sont pas connues dans les données références
                    if (marque) {
                        const groupe = refs?.groupesMarquesById?.get(marque.groupeMarquesId);
                        if (groupe) {
                            const code = groupe.code + '_' + marque.code;
                            return (
                                <span key={m}>
                                    <ReactSVG
                                        src={'assets/images/marques/' + code + '.svg'}
                                        className={'pictoMarque ' + code}
                                        wrapper="span"
                                        title={marque.libelle}
                                    />
                                    {props.modeFiltre && <span className="libelle">{marque.libelle}</span>}
                                </span>
                            );
                        }
                    }
                })}
            </div>
        </div>
    );
};

export default MarquesRenderer;

