import { observer } from 'mobx-react';
import React, { useEffect, useState } from 'react';
import AbstractPopinEditor from '../common/AbstractPopinEditor';
import DepartementsEditor from './DepartementsEditor';
import './DepartementsPopinEditor.scss';

/**
 * Composant d'édition d'une liste de départements en pop-in.
 *
 * @component
 * @param {import('../../../../jsdoc/types').ContexteAgGrid} props.context - Le contexte d'affichage de la liste
 * @param {string} props.departements - Les départements à afficher/modifier
 * @param {function} props.setDepartements - Setter pour modifier la valeur des departements
 * @param {number} props.maxSelectedItems - Nombre maximum de départements pouvant être sélectionnés
 * @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 (
 * <DepartementsEditor />
 * )
 */
const DepartementsPopinEditor = observer((props) => {
    const [departements, setDepartements] = useState(props.departements || []);

    //console.log('DepartementsPopinEditor init', props);

    // MAJ des départements
    useEffect(() => {
        //console.log('DepartementsPopinEditor effect', props);
        setDepartements(props.departements || []);
    }, [props.departements]);

    // Validation de la saisie
    const onValidate = (e) => {
        //  MAJ des départements si ils ont été modifiés
        if (JSON.stringify(props.departements) !== JSON.stringify(departements)) {
            props.setDepartements([...departements]);
        }
    };

    return (
        <AbstractPopinEditor
            className="DepartementsPopinEditor"
            isOpen={props.isOpen}
            setIsOpen={props.setIsOpen}
            onValidate={onValidate}
            message={props.message}
            titre="Modification groupée de départements"
        >
            <DepartementsEditor
                titre=""
                context={props.context}
                departements={departements}
                setDepartements={setDepartements}
                maxSelectedItems={props.maxSelectedItems}
            />
        </AbstractPopinEditor>
    );
});

export default DepartementsPopinEditor;
