import { observer } from 'mobx-react';
import * as React from 'react';
import './FontIconBadge.scss';

interface FontIconBadgeProps {
    value: string | undefined;
}

@observer
export class FontIconBadge extends React.Component<FontIconBadgeProps> {
    _notifsRef = React.createRef<HTMLDivElement>();

    // onPointerDown = (e: React.PointerEvent) => {
    //     setupMoveUpEvents(this, e,
    //         (e: PointerEvent) => {
    //             const dragData = new DragManager.DocumentDragData([this.props.collection!]);
    //             DragManager.StartDocumentDrag([this._notifsRef.current!], dragData, e.x, e.y);
    //             return true;
    //         },
    //         returnFalse, emptyFunction, false);
    // }

    render() {
        if (this.props.value === undefined) return null;
        return (
            <div className="fontIconBadge-container" ref={this._notifsRef}>
                <div
                    className="fontIconBadge"
                    style={{ display: 'initial' }}
                    // onPointerDown={this.onPointerDown}
                >
                    {this.props.value}
                </div>
            </div>
        );
    }
}