import { IconProp } from "@fortawesome/fontawesome-svg-core";
import { ObservableReactComponent } from "../../../../ObservableReactComponent";
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { setupMoveUpEvents, returnFalse } from "../../../../../../ClientUtils";
import { emptyFunction } from "../../../../../../Utils";
import { undoable } from "../../../../../util/UndoManager";
import { observer } from "mobx-react";

interface DocCreatorMenuButtonProps {
    icon: IconProp;
    // eslint-disable-next-line
    function: () => any;
    styles?: string;
}

@observer
export class DocCreatorMenuButton extends ObservableReactComponent<DocCreatorMenuButtonProps> {
    // eslint-disable-next-line
    setupButtonClick = (e: React.PointerEvent, func: (...args: any) => void) => {
        setupMoveUpEvents(
            this,
            e,
            returnFalse,
            emptyFunction,
            undoable(clickEv => {
                clickEv.stopPropagation();
                clickEv.preventDefault();
                func();
            }, 'create docs')
        );
    };

    render() {

        return (
            <button className={`docCreatorMenu-menu-button ${this._props.styles}`} onPointerDown={e => this.setupButtonClick(e, async () => this._props.function())}>
                <FontAwesomeIcon icon={this._props.icon} />
            </button>
        );
    }
}