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

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

import './PonderationsPopinEditor.scss';

/**
 * Composant d'édition de pondérations en pop-in.
 *
 * @component
 * @param {Object} props.context - Le contexte d'affichage de la liste
 * @param {Array.<string>} props.criteres - Liste des libellés des critères à pondérer
 * @param {Array.<number>} props.ponderations - Liste des valeurs de pondération
 * @param {function} props.setPonderations - Met à jour les pondérations
 * @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 (
 * <PonderationsPopinEditor />
 * )
 */
const PonderationsPopinEditor = observer((props) => {
    //console.log('PonderationsPopinEditor props', props);

    const [ponderations, setPonderations] = useState(props.ponderations || []);

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

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

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

    return (
        <AbstractPopinEditor
            className="PonderationsPopinEditor"
            isOpen={props.isOpen}
            setIsOpen={props.setIsOpen}
            onValidate={onValidate}
            message={props.message}
            titre="Modification groupée de compétences"
        >
            <PonderationsEditor
                titre=""
                context={props.context}
                criteres={props.criteres}
                ponderations={ponderations}
                setPonderations={setPonderations}
            />
        </AbstractPopinEditor>
    );
});

export default PonderationsPopinEditor;
