import { observer } from 'mobx-react';
import React, { useEffect, useState } from 'react';
import { getRefs } from '../../listes/commonAGGridFunctions';
import AbstractPopinEditor from '../common/AbstractPopinEditor';
import PosteSureffectifEditor from './PosteSureffectifEditor';

/**
 * Composant d'édition d'un poste en sureffectif en pop-in.
 *
 * @component
 * @param {import('../../../../jsdoc/types').ContexteAgGrid} props.context - Le contexte d'affichage de la liste
 * @param {string} props.infos - Les informations du poste à éditer, sous forme d'objet de type {departement: ..., codeFe: ..., lieu: ..., zoneDeDefense: ..., codeFeMere: ...}
 * @param {function} props.setInfos - Setter pour modifier les informations du poste
 * @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 (
 * <PosteSureffectifEditor />
 * )
 */
 const PosteSureffectifPopinEditor = observer((props) => {
    const [infos, setInfos] = useState(props.infos || {});
    const [disable, setDisable] = React.useState(false);


    // MAJ du poste en sureffectif
    useEffect(() => {
        setInfos(props.infos || {});
    }, [props.infos]);

    const nonValide = () => {
        return     (
            <button disabled={disable} onClick={() => setDisable(true)}>
                Click me!
             </button>)
      }
    // Callback de validation (= prise en compte) de la saisie
    const validationSaisie = () => {
        //  MAJ de l'EIP uniquement s'il a été modifié
        if (JSON.stringify(props.infos) !== JSON.stringify(infos)) {
            props.setInfos({ ...infos });
        }
    };

    // Callback de vérification de validité de l'EIP saisi
    const isInfosValid = () => {
        return (
            infos &&
            infos.departement &&
            infos.codeFe &&
            infos.lieu && 
            infos.zoneDeDefense &&  
            infos.codeFeMere &&
            infos.etr
        );
    };
    return (
        <AbstractPopinEditor
            titre={props.titre}
            className="PosteSureffectifPopinEditor"
            isOpen={props.isOpen}
            setIsOpen={props.setIsOpen}
            onValidate={validationSaisie}
            disabled={!infos}
            conditionValidation={isInfosValid}
            message={props.message}
        >
            <PosteSureffectifEditor titre="" context={props.context} infos={infos} setInfos={setInfos} />
        </AbstractPopinEditor>
    );
});

export default PosteSureffectifPopinEditor;