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';
import { DocumentManager } from '../../../util/DocumentManager';
import { CollectionFreeFormInfoState, infoState } from './CollectionFreeFormInfoState';

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

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

    constructor(props: any) {
        super(props);
        this.currState = this.state0;
    }

    @computed get first_doc() {
        return this.props.Freeform.childDocs.lastElement();
    }
    @observable currState: infoState;
    state0: infoState = {
        Message: 'Click to create Object',
        Arcs: [
            {
                events: () => this.props.Freeform.childDocs,
                actions: (docs: Doc[]) => {
                    if (docs.length === 1) this.currState = this.state1;
                    if (docs.length > 1) this.currState = this.state2;
                },
            },
        ],
    };
    state1: infoState = {
        Message: 'Create a second doc',
        Arcs: [
            {
                events: () => this.props.Freeform.childDocs,
                actions: (docs: Doc[]) => {
                    if (docs.length === 0) this.currState = this.state0;
                    if (docs.length === 2) this.currState = this.state2;
                },
            },
        ],
    };
    state2: infoState = {
        Message: 'Create a link',
        Arcs: [
            {
                events: () => LinkManager.Instance.getAllDirectLinks(this.first_doc),
                actions: links => links?.length && (this.currState = this.state3),
            },
            {
                events: () => this.props.Freeform.childDocs,
                actions: docs => {
                    if (docs.length === 0) this.currState = this.state0;
                    if (docs.length === 1) this.currState = this.state1;
                },
            },
        ],
    };

    state3: infoState = {
        Message: 'View links',
        Arcs: [
            {
                events: () => LinkManager.Instance.getAllDirectLinks(this.first_doc),
                actions: links => links?.length === 0 && (this.currState = this.state2),
            },
            {
                events: () => DocumentLinksButton.LinkEditorDocView,
                actions: viewingLinks => viewingLinks && (this.currState = this.state4),
            },
        ],
    };
    state4: infoState = {
        Message: 'You did it!',
        Arcs: [
            {
                events: () => false,
                actions: arc => {},
            },
        ],
    };

    /*
    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 = 'Hello world! You can drag and drop to move your document around.';
                } else if (docs.length === 2) {
                    this.message = 'Great job. To create a new link between them, click the link icon on both documents.';
                } 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 = 'Great moves. Try creating a second document.';
                }
                if (links && links.length > 0) {
                    this.message = 'You made your first link! You can view your links by selecting the blue dot.';
                }
            },
            { fireImmediately: true }
        );
        this._disposers.reaction3 = reaction(
            () => ({ activeTool: Doc.ActiveTool, viewingLinks: DocumentLinksButton.LinkEditorDocView }),
            ({ activeTool, viewingLinks }) => {
                if (activeTool == InkTool.Pen) {
                    this.message = "You're in pen mode! Click and drag to draw your first masterpiece.";
                }
                if (viewingLinks) {
                    this.message = 'To edit your links, click the pencil icon.';
                }
                if (Doc.ActiveTool === InkTool.Pen) {
                    this.message = 'Editing links';
                }
            },
            { fireImmediately: true }
        );
        this._disposers.reaction4 = reaction(
            () => ({ startLink: DocumentLinksButton.StartLink, endLink: Doc.UserDoc().links }),
            ({ startLink, endLink }) => {
                if (startLink) {
                    this.message = "You've started a link.";
                } else if (endLink) {
                    this.message = "You've completed a link.";
                }
            }
        );
        this._disposers.reaction5 = reaction(
            () => ({ pin: Doc.ActivePresentation?.data, trails: DocumentManager.Instance.DocumentViews.find(view => view.Document === Doc.MyTrails) }),
            ({ pin, trails }) => {
                // if (pin) {
                //     this.message = 'You pinned your doc to a trail.';
                // }
                if (trails) {
                    this.message = 'This is your trails tab.';
                }
            }
        );
        this._disposers.reaction6 = reaction(
            () => ({ presentationMode: Doc.ActivePresentation?.presentation_status }),
            ({ presentationMode }) => {
                if (presentationMode === 'edit') {
                    this.message = 'You are editing your presentation.';
                } else if (presentationMode === 'manual') {
                    this.message = 'Manual presentation mode';
                } else if (presentationMode === 'auto') {
                    this.message = 'Auto presentation mode';
                }
            }
        );
    }

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

    // stop 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 <CollectionFreeFormInfoState state={this.currState} />;
    }
}