import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconButton } from '@dash/components';
import { action, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import { SettingsManager } from '../../../util/SettingsManager';
import { ObservableReactComponent } from '../../ObservableReactComponent';
import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
import './ImageLabelHandler.scss';

@observer
export class ImageLabelHandler extends ObservableReactComponent<object> {
    // eslint-disable-next-line no-use-before-define
    static Instance: ImageLabelHandler;

    @observable _display: boolean = false;
    @observable _pageX: number = 0;
    @observable _pageY: number = 0;
    @observable _yRelativeToTop: boolean = true;
    @observable _currentLabel: string = '';
    @observable _labelGroups: string[] = [];

    constructor(props: object) {
        super(props);
        makeObservable(this);
        ImageLabelHandler.Instance = this;
    }

    @action
    displayLabelHandler = (x: number, y: number) => {
        this._pageX = x;
        this._pageY = y;
        this._display = true;
        this._labelGroups = [];
    };

    @action
    hideLabelhandler = () => {
        this._display = false;
        this._labelGroups = [];
    };

    @action
    addLabel = (labelIn: string) => {
        const label = labelIn.toUpperCase().trim();
        if (label.length > 0) {
            if (!this._labelGroups.includes(label)) {
                this._labelGroups = [...this._labelGroups, label];
            }
        }
    };

    @action
    removeLabel = (label: string) => {
        const labelUp = label.toUpperCase();
        this._labelGroups = this._labelGroups.filter(group => group !== labelUp);
    };

    @action
    groupImages = () => {
        MarqueeOptionsMenu.Instance.groupImages();
        this._display = false;
    };

    render() {
        if (this._display) {
            return (
                <div
                    id="label-handler"
                    className="contextMenu-cont"
                    style={{
                        display: this._display ? '' : 'none',
                        left: this._pageX,
                        ...(this._yRelativeToTop ? { top: Math.max(0, this._pageY) } : { bottom: this._pageY }),
                        background: SettingsManager.userBackgroundColor,
                        color: SettingsManager.userColor,
                    }}>
                    <div>
                        <IconButton tooltip={'Cancel'} onPointerDown={this.hideLabelhandler} icon={<FontAwesomeIcon icon="eye-slash" />} color={MarqueeOptionsMenu.Instance.userColor} style={{ width: '19px' }} />
                        <input aria-label="label-input" id="new-label" type="text" placeholder="Input a classification" style={{ color: 'black' }} />
                        <IconButton
                            tooltip={'Add Label'}
                            onPointerDown={() => {
                                const input = document.getElementById('new-label') as HTMLInputElement;
                                const newLabel = input.value;
                                this.addLabel(newLabel);
                                this._currentLabel = '';
                                input.value = '';
                            }}
                            icon={<FontAwesomeIcon icon="plus" />}
                            color={MarqueeOptionsMenu.Instance.userColor}
                            style={{ width: '19px' }}
                        />
                        <IconButton tooltip={'Group Images'} onPointerDown={this.groupImages} icon={<FontAwesomeIcon icon="object-group" />} color={MarqueeOptionsMenu.Instance.userColor} style={{ width: '19px' }} />
                    </div>
                    <div>
                        {this._labelGroups.map(group => {
                            return (
                                <div key={group}>
                                    <p>{group}</p>
                                    <IconButton
                                        tooltip="Remove Label"
                                        onPointerDown={() => {
                                            this.removeLabel(group);
                                        }}
                                        icon={'x'}
                                        color={MarqueeOptionsMenu.Instance.userColor}
                                        style={{ width: '19px' }}
                                    />
                                </div>
                            );
                        })}
                    </div>
                </div>
            );
        } else {
            return <></>;
        }
    }
}