import React from 'react';

import { observer } from 'mobx-react';

import i18n from '../../../i18n/i18n';
import MarquesRenderer from '../renderers/MarquesRenderer';

/**
 * Librairie de fonctions et composants utilitaires nécessaires à l'affichage de la fiche détaillée d'un administré.
 *
 * @module
 */

/**
 * Affiche une info.
 */
export const InfoDisplay = observer((props) => {
    return (
        <div className="InfoDisplay">
            <strong>{props.label}&nbsp;: </strong>{' '}
            {props.text && props.text.toString().length ? props.text : <span className="donneeAbsente">{i18n.global.donnees.vide}</span>}
        </div>
    );
});

/**
 * Affiche une date avec plusieurs paramètres.
 */
export const ComplexDateDisplay = observer((props) => {
    const CHAMP_VIDE = i18n.global.donnees.vide;
    const jourPluriel = props.temps !== '' ? (props.temps > 1 ? ' ans' : ' an') : '? ans';
    const temps = parseInt(props.temps, 10) < 0 ? 0 : props.temps;
    const toDisplay =
        props.type == 'Temps'
            ? props.date + (props.date && props.date != CHAMP_VIDE ? ' (depuis ' + temps + jourPluriel + ')' : '')
            : props.date + (props.date && props.date != CHAMP_VIDE ? ' (reste ' + temps + jourPluriel + ')' : '');

    return (
        <div className="InfoDisplay">
            <strong>{props.label}&nbsp;: </strong> {props.date ? toDisplay : <span className="donneeAbsente">{i18n.global.donnees.vide}</span>}
            {props.auPAM && (
                <>
                    <strong> / au PAM : </strong>
                    {props.auPAM}
                </>
            )}
        </div>
    );
});

export const MarquesRendererDisplay = observer((props) => {
    return (
        <>
            <div className="MarquesRendererDisplay">
                <strong>{props.label}&nbsp;:</strong>&nbsp;
                <div
                    onClick={() => {
                        alert("TEST");
                        //setIsMarquesEditorOpen(true);
                    }}
                >
                    {props.marques && props.marques.length ? (
                        <MarquesRenderer marques={props.marques} modeFiltre={false} context={props.context} />
                    ) : (
                        <span>{i18n.global.donnees.vide}</span>
                    )}
                </div>
            </div>
        </>
    );
});
