"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
const EditorContext_1 = require("./EditorContext");
let dragImage;
const DRAG_IMAGE_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
function EditorButton(props) {
    const { data, ...buttonProps } = props;
    const { textAreaRef } = (0, EditorContext_1.useExpressionEditor)();
    return (React.createElement(SimpleButton_1.default, { "data-name": 'operator-or-fn', variant: "text", draggable: true, onDragStart: (event) => {
            if (!dragImage) {
                // we want to lazy init the image since otherwise it fails in SSR environments if it is declared outside the cmp - ReferenceError: Image is not defined
                dragImage = new Image(0, 0);
                dragImage.src = DRAG_IMAGE_SRC;
            }
            document.getSelection().empty();
            event.dataTransfer.setData('text', data + ' ');
            event.dataTransfer.setDragImage(dragImage, 0, 0);
        }, onDragEnd: () => {
            try {
                document.getSelection()?.collapseToEnd();
            }
            catch (err) {
                console.error(err);
            }
        }, onClick: () => {
            textAreaRef.current?.focus();
            try {
                document.execCommand('insertText', false, data + ' ');
                document.getSelection()?.collapseToEnd();
            }
            catch (err) {
                console.error(err);
            }
        }, style: {
            cursor: 'grab',
        }, ...buttonProps }));
}
exports.default = EditorButton;
