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

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

import './CompetencesPopinEditor.scss';

/**
 * Composant d'édition d'une liste de de compétences en pop-in.
 *
 * @component
 * @param {import('../../../../jsdoc/types').ContexteAgGrid} props.context - Le contexte d'affichage de la liste
 * @param {string} props.competences - Les compétences à afficher/modifier
 * @param {function} props.setCompetences - 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 (
 * <CompetencesEditor />
 * )
 */
const CompetencesPopinEditor = observer((props) => {
    const [competences, setCompetences] = useState(props.competences || []);

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

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

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

    return (
        <AbstractPopinEditor
            className="CompetencesPopinEditor"
            isOpen={props.isOpen}
            setIsOpen={props.setIsOpen}
            onValidate={onValidate}
            message={props.message}
            titre="Modification groupée de compétences"
        >
            <CompetencesEditor
                titre=""
                context={props.context}
                competences={competences}
                setCompetences={setCompetences}
                maxSelectedItems={props.maxSelectedItems}
            />
        </AbstractPopinEditor>
    );
});

export default CompetencesPopinEditor;
