import { observer } from 'mobx-react';
import React, { useState } from 'react';
import { ADMINISTRES } from '../../../constantes/constantes';
import i18n from '../../../i18n/i18n';
import MarquesPopinEditor from '../editors/marques/MarquesPopinEditor';
import NotesEditor from '../editors/notes/NotesEditor';
import { getRefs } from '../listes/commonAGGridFunctions';
import MarquesRenderer from '../renderers/MarquesRenderer';
import NotesRenderer from '../renderers/NotesRenderer';




/**
 * Librairie de fonctions et composants utilitaires nécessaires à l'affichage de la synthèse d'un poste et d'un administré.
 *
 * @module
 */

/**
 * Affiche un champ avec sa valeur.
 *
 * @param {string} props.label Libellé
 * @param {string} props.text Valeur
 */
export const InfoDisplay = observer((props) => {
    return (
        <div className="InfoDisplay">
            <strong>{props.label}&nbsp;: </strong> {props.text ? props.text : <span className="donneeAbsente">{i18n.global.donnees.vide}</span>}
        </div>
    );
});

/**
 * Affiche un avis et son éditeur.
 *
 * @param {string} props.label Libellé
 * @param {string} props.avis Valeur de l'avis
 * @param {object} props.context Le contexte d'affichage de la liste
 */
export const AvisRendererDisplay = observer((props) => {
    const isAvisAdministre = props.context.groupeType === ADMINISTRES;
    const avis = isAvisAdministre
        ? getRefs(props)?.avisAdministreById?.get(props.avis)
        : getRefs(props)?.avisPosteById?.get(props.avis);

    //TODO ajouter éditeur pour l'avis ?

    return (
        <div className="AvisRendererDisplay">
            <strong>{props.label} :</strong>&nbsp;
            {avis ? (
                <span className={'avis ' + (isAvisAdministre ? 'administre ' : 'poste ') + avis.code}>{avis.libelle}</span>
            ) : (
                <span className="donneeAbsente">{i18n.global.donnees.vide}</span>
            )}
        </div>
    );
});

/**
 * Affiche des notes et leur éditeur
 *
 * @params {string} props.label
 * @params {string} props.notes
 * @params {function} props.setNotes
 * @params {boolean} props.editable
 */
export const NotesRendererDisplay = observer((props) => {
    const [isNotesEditorOpen, setIsNotesEditorOpen] = useState(false);

    return (
        <>
            <div className="NotesRendererDisplay">
                <strong>{props.label}&nbsp;:</strong>&nbsp;
                {props.notes ? (
                    <div
                        onClick={() => {
                            if (props.editable) {
                                setIsNotesEditorOpen(true);
                            }
                        }}
                    >
                        <NotesRenderer notes={props.notes} isNotInGrid={true} editable={props.editable} />
                    </div>
                ) : (
                    <span className="donneeAbsente">{i18n.global.donnees.vide}</span>
                )}
            </div>
            <NotesEditor
                notes={props.notes}
                setNotes={(notes) => {
                    props.setNotes(notes);
                    console.log('TODO AKA : enregistrer les modifications sur les notes à la fermeture de la pop-in');
                }}
                isOpen={isNotesEditorOpen}
                setIsOpen={setIsNotesEditorOpen}
            />
        </>
    );
});

/**
 * Affiche des marques et leur éditeur
 *
 * @params {string} props.label
 * @params {string} props.marques
 * @params {function} props.setMarques
 * @params {boolean} props.editable
 */
export const MarquesRendererDisplay = observer((props) => {
    const [isMarquesEditorOpen, setIsMarquesEditorOpen] = useState(false);

    return (
        <>
            <div className="MarquesRendererDisplay">
                <strong>{props.label}&nbsp;:</strong>&nbsp;
                <div
                    onClick={() => {
                        //setIsMarquesEditorOpen(true);
                    }}
                >
                    {props.marques && props.marques.length ? (
                        <MarquesRenderer marques={props.marques} modeFiltre={false} context={props.context} />
                    ) : (
                        <span>{i18n.global.donnees.vide}</span>
                        /*<BsPlusSquare size="15px" className="SyntheseAddMarque donneeAbsente" title="Cliquez pour ajouter des marques..." />*/
                    )}
                </div>
            </div>

            <MarquesPopinEditor
                marques={props.marques}
                isOpen={isMarquesEditorOpen}
                setIsOpen={setIsMarquesEditorOpen}
                context={props.context}
                typeDonnees={props.context.groupeType}
                setMarques={(marques) => {
                    props.setMarques(marques);
                    console.log('TODO AKA : enregistrer les modifications sur les marques à la fermeture de la pop-in');
                }}
            />
        </>
    );
});
