import { IReactionDisposer, computed, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import { Doc } from '../../../../fields/Doc';
import { ScriptField } from '../../../../fields/ScriptField';
import { PresBox } from '../../nodes/trails/PresBox';
import './CollectionFreeFormView.scss';
import React = require('react');
import { CollectionFreeFormView } from './CollectionFreeFormView';
import { NumCast } from '../../../../fields/Types';
import { LinkManager } from '../../../util/LinkManager';
import { InkTool } from '../../../../fields/InkField';
import { LinkDocPreview } from '../../nodes/LinkDocPreview';
import { DocumentLinksButton } from '../../nodes/DocumentLinksButton';

export interface CollectionFreeFormInfoUIProps {
    Document: Doc;
    Freeform: CollectionFreeFormView;
}

@observer
export class CollectionFreeFormInfoUI extends React.Component<CollectionFreeFormInfoUIProps> {
    private _disposers: { [name: string]: IReactionDisposer } = {};

    componentDidMount(): void {
        this._disposers.reaction1 = reaction(
            () => this.props.Freeform.childDocs.slice(),
            docs => {
                if (docs.length === 1) {
                    this.firstDoc = docs[0];
                    this.firstDocPos = { x: NumCast(this.firstDoc.x), y: NumCast(this.firstDoc.y) };
                    this.message = 'Doc 1';
                } else if (docs.length === 2) {
                    console.log('hello 1', docs[0]);
                    console.log('hello 2', docs[1]);
                    this.message = 'Doc 2';
                } else {
                    this.message = 'Click anywhere and begin typing to create your first text document!';
                }
            },
            { fireImmediately: true }
        );
        this._disposers.reaction2 = reaction(
            () => ({ x: NumCast(this.firstDoc?.x), y: NumCast(this.firstDoc?.y), links: this.firstDoc && LinkManager.Instance.getAllDirectLinks(this.firstDoc) }),
            ({ x, y, links }) => {
                if ((x && x != this.firstDocPos.x) || (y && y != this.firstDocPos.y)) {
                    this.message = 'You moved the doc';
                }
                if (links && links.length > 0) {
                    this.message = 'You made your first link! You can also click the link icon to start and complete the link.';
                }
            },
            { fireImmediately: true }
        );
        this._disposers.reaction3 = reaction(
            () => ({ activeTool: Doc.ActiveTool, linkMenu: DocumentLinksButton.LinkEditorDocView }),
            ({ activeTool, linkMenu }) => {
                if (activeTool == InkTool.Pen) {
                    this.message = "You're in pen mode! Click and drag to draw your first masterpiece.";
                }
                if (linkMenu) {
                    this.message = 'To edit your links, click this pencil icon.';
                }
            },
            { fireImmediately: true }
        );
    }

    componentWillUnmount(): void {
        Object.values(this._disposers).forEach(disposer => disposer?.());
    }

    // stop that reaction from what it's currently doing
    // this._disposers.reaction1();

    @observable message = 'Click anywhere and begin typing to create your first document!';
    @observable firstDoc: Doc | undefined;
    @observable secondDoc: Doc | undefined;
    firstDocPos = { x: 0, y: 0 };

    render() {
        return <div className="infoUI">{this.message}</div>;
    }
}