

import React, {useEffect, useState, useContext} from 'react';
import { observer } from 'mobx-react';
import { Modal } from 'react-overlays';
import { RiCloseCircleFill } from 'react-icons/all';
import { toast } from 'react-toastify';
import { Button } from 'react-bootstrap';
import './CalculsPopinEditor.scss';
import './CalculSelectif.jsx';
import CalculSelectif from './CalculSelectif.jsx';


/**
 * Composant permettant de wrapper un éditeur de données (ex : marques, notes, compétences, départements, ...) dans une pop-in (modale).
 *
 * @abstract
 * @component
 * @param {boolean} props.isOpen - Etat d'ouverture de la pop-in
 * @param {function} props.setIsOpen - Mise à jour de l'état d'ouverture de la pop-in
 * @param {function} props.conditionValidation - Fonction éventuelle qui teste si la validation est possible
 * @param {function} props.onValidate - Callback éventuelle appelée lorsque l'utilisateur clique sur "Valider"
 * @param {function} props.onCancel - Callback éventuelle appelée lorsque l'utilisateur clique sur "Annuler" ou ferme la pop-in
 * @param {string} props.titre - Titre éventuel
 * @param {string} props.message - Message d'introduction éventuel
 * @param {*} props.children - Contenu de la pop-in
**/

const CalculsPopinEditor = observer((props) => {
    const [modalIsOpen, setModalIsOpen] = useState(false);


    // MAJ de l'état d'ouverture de la modale
    useEffect(() => {
        setModalIsOpen(props.isOpen);
    }, [props.isOpen]);

    // Fond d'écran
    const Backdrop = () => {
        return (
            <div
                className="Backdrop"
                onClick={() => {
                    closeModal(false);
                }}
            />
        );
    };

    /**
     * Ferme la modale et valide ou annule la saisie effectuée.
     * @param {boolean} validerSaisie - Indique s'il faut valider la saisie à la fermeture de la modale.
     */
    const closeModal = (validerSaisie) => {
        if (validerSaisie) {
            // Validation de la saisie
            if (props.onValidate) {
                props.onValidate();
            }
        } else {
            // Annulation de la saisie
            if (props.onCancel) {
                props.onCancel();
            }
            //toast.info('Modification abandonnée.');
        }

        setModalIsOpen(false);
        props.setIsOpen(false);
    };


    return (
        <Modal
            className={'AbstractPopinEditor' + (props.className ? ' ' + props.className : '')}
            show={modalIsOpen}
            renderBackdrop={Backdrop}
            enforceFocus={false}
        >
            <div>

                {props.message && <div className="message">{props.message}</div>}

                <div className="editor">{props.children}</div>

                <div className="actions">
                    <Button
                        variant="secondary"
                        onClick={() => {
                            closeModal(false);
                        }}
                    >
                        Annuler
                    </Button>
                    <CalculSelectif></CalculSelectif>

                </div>
            </div>
        </Modal>
    );
});

export default CalculsPopinEditor;