import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react';

import AbstractPopinEditor from '../common/AbstractPopinEditor';
import ZonesEditor from './ZonesEditor';

import './ZonesPopinEditor.scss';

/**
 * Composant d'édition d'une liste de zones géographiques SHM en pop-in.
 *
 * @component
 * @param {Object} props.context - Le contexte d'affichage de la liste
 * @param {string} props.zones - Les compétences à afficher/modifier
 * @param {function} props.setZones - Setter pour modifier la valeur des competences
 * @param {number} props.maxSelectedItems - Nombre maximum de compétences 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 (
 * <ZonesEditor />
 * )
 */
const ZonesPopinEditor = observer((props) => {
    const [zones, setZones] = useState(props.zones || []);

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

    // MAJ des compétences
    useEffect(() => {
        //console.log('CompetencesPopinEditor effect', props);
        setZones(props.zones || []);
    }, [props.zones]);

    // Validation de la saisie
    const onValidate = (e) => {
        //  MAJ des compétences si elles ont été modifiées
        if (JSON.stringify(props.zones) !== JSON.stringify(zones)) {
            props.setZones([...zones]);
        }
    };

    return (
        <AbstractPopinEditor
            className="ZonesPopinEditor"
            isOpen={props.isOpen}
            setIsOpen={props.setIsOpen}
            onValidate={onValidate}
            message={props.message}
            titre="Modification groupée de zones géographiques SHM"
        >
            <ZonesEditor
                titre=""
                context={props.context}
                zones={zones}
                setZones={setZones}
                maxSelectedItems={props.maxSelectedItems}
            />
        </AbstractPopinEditor>
    );
});

export default ZonesPopinEditor;
