import { action, makeObservable, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { DocData } from '../../../fields/DocSymbols';
import { LinkManager } from '../../util/LinkManager';
import './LinkDescriptionPopup.scss';
import { TaskCompletionBox } from './TaskCompletedBox';
import { StrCast } from '../../../fields/Types';

@observer
export class LinkDescriptionPopup extends React.Component<{}> {
    public static Instance: LinkDescriptionPopup;
    @observable public display: boolean = false;
    @observable public showDescriptions: string = 'ON';
    @observable public popupX: number = 700;
    @observable public popupY: number = 350;
    @observable description: string = '';
    @observable popupRef = React.createRef<HTMLDivElement>();

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

    @action
    descriptionChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.description = e.currentTarget.value;
    };

    @action
    onDismiss = (add: boolean) => {
        this.display = false;
        if (add) {
            LinkManager.Instance.currentLink && (LinkManager.Instance.currentLink[DocData].link_description = this.description);
        }
        this.description = '';
    };

    @action
    onClick = (e: PointerEvent) => {
        if (this.popupRef && !!!this.popupRef.current?.contains(e.target as any)) {
            this.display = false;
            this.description = '';
            TaskCompletionBox.taskCompleted = false;
        }
    };

    componentDidMount() {
        document.addEventListener('pointerdown', this.onClick, true);
        reaction(
            () => this.display,
            display => display && (this.description = StrCast(LinkManager.Instance.currentLink?.link_description))
        );
    }

    componentWillUnmount() {
        document.removeEventListener('pointerdown', this.onClick, true);
    }

    render() {
        return !this.display ? null : (
            <div
                className="linkDescriptionPopup"
                ref={this.popupRef}
                style={{
                    left: this.popupX ? this.popupX : 700,
                    top: this.popupY ? this.popupY : 350,
                }}>
                <input
                    className="linkDescriptionPopup-input"
                    onKeyDown={e => {
                        e.key === 'Enter' && this.onDismiss(true);
                        e.stopPropagation();
                    }}
                    value={this.description}
                    placeholder={this.description || '(Optional) Enter link description...'}
                    onChange={e => this.descriptionChanged(e)}
                />
                <div className="linkDescriptionPopup-btn">
                    <div className="linkDescriptionPopup-btn-dismiss" onPointerDown={e => this.onDismiss(false)}>
                        {' '}
                        Dismiss{' '}
                    </div>
                    <div className="linkDescriptionPopup-btn-add" onPointerDown={e => this.onDismiss(true)}>
                        {' '}
                        Add{' '}
                    </div>
                </div>
            </div>
        );
    }
}