import { observer } from 'mobx-react';
import React, { useEffect, useState } from 'react';
import { MARQUES_SEPARATEUR } from '../../../../constantes/constantes';
import AbstractPopinEditor from '../common/AbstractPopinEditor';
import MarquesEditor from './MarquesEditor';
import './MarquesPopinEditor.scss';

/**
 * Composant d'édition d'un ensemble de marques en pop-in.
 *
 * @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 {function} props.setMarques - Setter pour modifier la valeur des marques
 * @param {number} props.maxSelectedItems - Nombre maximum de marques pouvant être sélectionnées
 * @param {string} props.message - Message d'introduction à afficher
 *
 * @param {boolean} props.isOpen - Etat d'ouverture de la pop-in
 * @param {boolean} props.setIsOpen - Mise à jour de l'état d'ouverture de la pop-in
 * @example
 * return (
 * <MarquesPopinEditor />
 * )
 */
const MarquesPopinEditor = observer((props) => {
    const [marques, setMarques] = useState(props.marques || []);

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

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

    // Validation de la saisie
    const onValidate = (e) => {
        //  MAJ des marques si elles ont été modifiées
        if ((props.marques || []).join(MARQUES_SEPARATEUR) !== marques.join(MARQUES_SEPARATEUR)) {
            props.setMarques([...marques]);
        }
    };

    return (
        <AbstractPopinEditor
            className="MarquesPopinEditor"
            isOpen={props.isOpen}
            setIsOpen={props.setIsOpen}
            onValidate={onValidate}
            message={props.message}
            titre="Modification groupée de marques"
        >
            <MarquesEditor titre="" context={props.context} marques={marques} setMarques={setMarques} typeDonnees={props.typeDonnees} />
        </AbstractPopinEditor>
    );
});

export default MarquesPopinEditor;
