import React, { forwardRef, useImperativeHandle, useState } from 'react';

import AGLocaleText from '../../../../i18n/aggrid-locale-fr';
import MarquesRenderer from '../../renderers/MarquesRenderer';
import { getValueForCellOrGroupCell } from '../commonAGGridColumnTypes';
import { MARQUES_SEPARATEUR } from '../../../../constantes/constantes';

import '../../renderers/MarquesRenderer.scss';

/**
 * Renderer d'une ou plusieurs marques dans une cellule d'une liste AG Grid.
 *
 * @component
 * @param {Array.<string>} marques - Liste des marques
 * @param {object} context - Le contexte d'affichage de la liste
 */
const MarquesCellRenderer = forwardRef((params, ref) => {
    const getValueFromParams = (params) => {
        const value = getValueForCellOrGroupCell(params, params.colDef?.colId, null);
            return typeof value === 'string' ? value.split(MARQUES_SEPARATEUR) : value || [];

    };
    const [marques, setMarques] = useState(getValueFromParams(params));

    useImperativeHandle(ref, () => {
        return {
            refresh(params) {
                setMarques(getValueFromParams(params));
            }
        };
    });

    // Traitement des cas particuliers pour le filtre
    if (!marques || marques === '(Select All)' || marques === AGLocaleText.selectAll) {
        return marques;
    }

    const modeFiltre = typeof marques === 'string';

    let marquesArray = modeFiltre ? [marques] : marques;

    return <MarquesRenderer marques={marquesArray} context={params.context} modeFiltre={modeFiltre} />;
});

export default MarquesCellRenderer;
