import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { SnappingManager } from '../../../util/SnappingManager';
import './DocCreatorMenu.scss';
import { ObservableReactComponent } from '../../ObservableReactComponent';

@observer
export class DocCreatorMenu extends ObservableReactComponent<{}> {

    static Instance: DocCreatorMenu;

    private _reactionDisposer?: IReactionDisposer;

    @observable _pageX: number = 0;
    @observable _pageY: number = 0;
    @observable _display: boolean = false;

    @observable _yRelativeToTop: boolean = true;
    @observable _selectedIndex = -1;

    @observable _mouseX: number = -1;
    @observable _mouseY: number = -1;
    @observable _shouldDisplay: boolean = false;

    constructor(props: any) {
        super(props);
        makeObservable(this);
        DocCreatorMenu.Instance = this;
    }

    @action
    onPointerDown = (e: PointerEvent) => {
        this._mouseX = e.clientX;
        this._mouseY = e.clientY;
    };
    @action
    onPointerUp = (e: PointerEvent) => {
        if (e.button !== 2 && !e.ctrlKey) return;
        const curX = e.clientX;
        const curY = e.clientY;
        if (Math.abs(this._mouseX - curX) > 1 || Math.abs(this._mouseY - curY) > 1) {
            this._shouldDisplay = false;
        }

        if (this._shouldDisplay) {
            this._display = true;
        }
    };

    componentDidMount() {
        document.addEventListener('pointerdown', this.onPointerDown, true);
        document.addEventListener('pointerup', this.onPointerUp);
    }

    componentWillUnmount() {
        document.removeEventListener('pointerdown', this.onPointerDown, true);
        document.removeEventListener('pointerup', this.onPointerUp);
        this._reactionDisposer?.();
    }

    static readonly buffer = 20;
    static readonly width = 300;
    static readonly height = 400;
    get pageX() {
        return this._pageX + DocCreatorMenu.width > window.innerWidth - DocCreatorMenu.buffer ? window.innerWidth - DocCreatorMenu.buffer - DocCreatorMenu.width : Math.max(0, this._pageX);
    }

    get pageY() {
        return this._pageY + DocCreatorMenu.height > window.innerHeight - DocCreatorMenu.buffer ? window.innerHeight - DocCreatorMenu.buffer - DocCreatorMenu.height : Math.max(0, this._pageY);
    }

    @action
    displayMenu = (x: number, y: number) => {
        // maxX and maxY will change if the UI/font size changes, but will work for any amount
        // of items added to the menu

        this._pageX = x;
        this._pageY = y;
        this._shouldDisplay = true;
    };

    @action
    closeMenu = () => {
        const wasOpen = this._display;
        this._display = false;
        this._shouldDisplay = false;
        return wasOpen;
    };

    render() {
        return (
            <div
                className="docCreatorMenu-cont"
                style={{
                    display: '',
                    left: this.pageX,
                    ...(this._yRelativeToTop ? { top: Math.max(0, this.pageY) } : { bottom: this.pageY }),
                    background: SnappingManager.userBackgroundColor,
                    color: SnappingManager.userColor,
                }}>
            {!this._shouldDisplay ? undefined : 
            <div>hi hi</div>
            
            
            }
            </div>
            )
        }
    

}