import { IconLookup } from '@fortawesome/fontawesome-svg-core';
import { faChartLine, faClipboard } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Utils } from '../../../Utils';
import './TimelineMenu.scss';

@observer
export class TimelineMenu extends React.Component {
    public static Instance: TimelineMenu;

    @observable private _opacity = 0;
    @observable private _x = 0;
    @observable private _y = 0;
    @observable private _currentMenu: JSX.Element[] = [];

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

    @action
    openMenu = (x?: number, y?: number) => {
        this._opacity = 1;
        x ? (this._x = x) : (this._x = 0);
        y ? (this._y = y) : (this._y = 0);
    };

    @action
    closeMenu = () => {
        this._opacity = 0;
        this._currentMenu = [];
        this._x = -1000000;
        this._y = -1000000;
    };

    @action
    addItem = (type: 'input' | 'button', title: string, event: (e: any, ...args: any[]) => void) => {
        if (type === 'input') {
            const inputRef = React.createRef<HTMLInputElement>();
            let text = '';
            this._currentMenu.push(
                <div key={Utils.GenerateGuid()} className="timeline-menu-item">
                    <FontAwesomeIcon icon={faClipboard as IconLookup} size="lg" />
                    <input
                        className="timeline-menu-input"
                        ref={inputRef}
                        placeholder={title}
                        onChange={e => {
                            e.stopPropagation();
                            text = e.target.value;
                        }}
                        onKeyDown={e => {
                            if (e.keyCode === 13) {
                                event(Number(text));
                                this.closeMenu();
                                e.stopPropagation();
                            }
                        }}
                    />
                </div>
            );
        } else if (type === 'button') {
            this._currentMenu.push(
                <div key={Utils.GenerateGuid()} className="timeline-menu-item">
                    <FontAwesomeIcon icon={faChartLine as IconLookup} size="lg" />
                    <p
                        className="timeline-menu-desc"
                        onClick={e => {
                            e.preventDefault();
                            e.stopPropagation();
                            event(e);
                            this.closeMenu();
                        }}>
                        {title}
                    </p>
                </div>
            );
        }
    };

    @action
    addMenu = (title: string) => {
        this._currentMenu.unshift(
            <div key={Utils.GenerateGuid()} className="timeline-menu-header">
                <p className="timeline-menu-header-desc">{title}</p>
            </div>
        );
    };

    render() {
        return (
            <div key={Utils.GenerateGuid()} className="timeline-menu-container" style={{ opacity: this._opacity, left: this._x, top: this._y }}>
                {this._currentMenu}
            </div>
        );
    }
}