import React, { forwardRef, useImperativeHandle, useState } from 'react';

import './PourcentageCellRenderer.scss';

/**
 * Renderer d'affichage d'un pourcentage dans une cellule d'une liste AG Grid.
 *
 * @component
 * @param {number} value - La valeur (nombre flottant, typiquement entre 0 et 100)
 * @param {number} decimals - Nb de décimales à afficher
 * @example
 * return (
 * <PourcentageCellRenderer value={12.3747} decimals={1} />
 * )
 */

const PourcentageCellRenderer = forwardRef((props, ref) => {
    const [value, setValue] = useState(props.value);

    const decimals = props.decimals || 0;

    useImperativeHandle(ref, () => {
        return {
            refresh(params) {
                setValue(params.value);
            }
        };
    });

    return (
        <span className="PourcentageCellRenderer">
            <span style={{ width: 2.5 + decimals + 'em' }}>
                {typeof value != 'undefined' && value !== null && !isNaN(Number.parseFloat(value))
                    ? Number.parseFloat(value).toFixed(decimals) + '%'
                    : ''}
            </span>
        </span>
    );
});

export default PourcentageCellRenderer;
