import React, { forwardRef } from 'react';
import ReactHtmlParser from 'react-html-parser';
import { BiCommentDetail } from 'react-icons/bi';
import Tippy from '@tippyjs/react';
import './NotesRenderer.scss';

/**
 * Renderer d'affichage de notes (texte riche) dans une cellule d'une liste AG Grid.
 *
 * @param {*} props
 * @returns
 */
const NotesRenderer = (props) => {
    const hasValue = props.notes && props.notes.trim().length;
    const isNotInGrid = props.isNotInGrid ? props.isNotInGrid : undefined;

    const htmlVisualise = (
        <div>
            <div>{ReactHtmlParser(props.notes)}</div>
        </div>
    );

    const NotesIcon = forwardRef((props, ref) => {
        return (
            <div ref={ref}>
                <BiCommentDetail className={'NotesIcon'} />
            </div>
        );
    });

    return (
        <div className={'NotesRenderer' + (hasValue ? '' : isNotInGrid ? ' donneeAbsente' : ' vide') + (props.editable ? ' editable' : '')}>
            {hasValue ? (
                <Tippy
                    allowHTML={true}
                    placement="bottom-start"
                    interactive="true"
                    content={htmlVisualise}
                    appendTo={document.body}
                    theme="light-border"
                    maxWidth="50em"
                    delay={[500, 100]}
                    duration={[500, 300]}
                >
                    <NotesIcon />
                </Tippy>
            ) : (
                <BiCommentDetail className={'NotesIcon'} />
            )}
        </div>
    );
};

export default NotesRenderer;
