import { observer } from "mobx-react";
import * as React from "react";
import { AclPrivate, Doc, DocListCast } from "../../../../fields/Doc";
import { GetEffectiveAcl } from "../../../../fields/util";
import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../../../Utils";
import { DragManager } from "../../../util/DragManager";
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>;
    }
}