import React = require('react');
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import { Doc } from '../../../fields/Doc';
import { LinkManager } from '../../util/LinkManager';
import './LinkDescriptionPopup.scss';
import { TaskCompletionBox } from './TaskCompletedBox';

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

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

    @action
    onDismiss = (add: boolean) => {
        LinkDescriptionPopup.descriptionPopup = false;
        if (add) {
            LinkManager.currentLink && (Doc.GetProto(LinkManager.currentLink).link_description = this.description);
        }
    };

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

    @action
    componentDidMount() {
        document.addEventListener('pointerdown', this.onClick, true);
    }

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

    render() {
        return (
            <div
                className="linkDescriptionPopup"
                ref={this.popupRef}
                style={{
                    left: LinkDescriptionPopup.popupX ? LinkDescriptionPopup.popupX : 700,
                    top: LinkDescriptionPopup.popupY ? LinkDescriptionPopup.popupY : 350,
                }}>
                <input
                    className="linkDescriptionPopup-input"
                    onKeyDown={e => e.stopPropagation()}
                    onKeyPress={e => e.key === 'Enter' && this.onDismiss(true)}
                    placeholder={'(Optional) Enter link description...'}
                    onChange={e => this.descriptionChanged(e)}></input>
                <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>
        );
    }
}