import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../fields/Doc';
import { Id } from '../../fields/FieldSymbols';
import { PresBox } from '../views/nodes/trails';
import { OverlayView } from '../views/OverlayView';
import { DocumentManager } from './DocumentManager';
import { Docs } from '../documents/Documents';
import { nullAudio } from '../../fields/URLField';

@observer
export class BranchingTrailManager extends React.Component {
    public static Instance: BranchingTrailManager;

    constructor(props: any) {
        super(props);
        if (!BranchingTrailManager.Instance) {
            BranchingTrailManager.Instance = this;
        }
    }

    setupUi = () => {
        OverlayView.Instance.addWindow(<BranchingTrailManager></BranchingTrailManager>, { x: 100, y: 150, width: 1000, title: 'Branching Trail'});
        // OverlayView.Instance.forceUpdate();
        console.log(OverlayView.Instance);
        // let hi = Docs.Create.TextDocument("beee", {
        //     x: 100,
        //     y: 100,
        // })
        // hi.overlayX = 100;
        // hi.overlayY = 100;
        
        // Doc.AddToMyOverlay(hi);
        console.log(DocumentManager._overlayViews);
    };
    

    // stack of the history
    @observable private slideHistoryStack: String[] = [];
    @action setSlideHistoryStack = action((newArr: String[]) => {
        this.slideHistoryStack = newArr;
    });

    @observable private containsSet: Set<String> = new Set<String>();

    // prev pres to copmare with
    @observable private prevPresId: String | null = null;
    @action setPrevPres = action((newId: String | null) => {
        this.prevPresId = newId;
    });

    // docId to Doc map
    @observable private docIdToDocMap: Map<String, Doc> = new Map<String, Doc>();

    observeDocumentChange = (targetDoc: Doc, pres: PresBox) => {
        const presId = pres.props.Document[Id];
        if (this.prevPresId === presId) {
            return;
        }

        const targetDocId = targetDoc[Id];
        this.docIdToDocMap.set(targetDocId, targetDoc);

        if (this.prevPresId === null) {
            this.setupUi();
        }

        if (this.prevPresId === null || this.prevPresId !== presId) {
            Doc.UserDoc().isBranchingMode = true;
            this.setPrevPres(presId);
            
            // REVERT THE SET
            const stringified = [presId, targetDocId].toString();
            if (this.containsSet.has([presId, targetDocId].toString())) {
                // remove all the elements after the targetDocId
                const newStack = this.slideHistoryStack.slice(0, this.slideHistoryStack.indexOf(stringified));
                const removed = this.slideHistoryStack.slice(this.slideHistoryStack.indexOf(stringified));
                this.setSlideHistoryStack(newStack);

                removed.forEach(info => this.containsSet.delete(info.toString()));
            } else {
                this.setSlideHistoryStack([...this.slideHistoryStack, stringified]);
                this.containsSet.add(stringified);
            }
        }
        console.log(this.slideHistoryStack.length);
        if (this.slideHistoryStack.length === 0) {
            Doc.UserDoc().isBranchingMode = false;
        }
    };

    clickHandler = (e: React.PointerEvent<HTMLButtonElement>, targetDocId: string, removeIndex: number) => {
        const targetDoc = this.docIdToDocMap.get(targetDocId);
        if (!targetDoc) {
            return;
        }

        const newStack = this.slideHistoryStack.slice(0, removeIndex);
        const removed = this.slideHistoryStack.slice(removeIndex);
        
        this.setSlideHistoryStack(newStack);

        removed.forEach(info => this.containsSet.delete(info.toString()));
        DocumentManager.Instance.showDocument(targetDoc, { willZoomCentered: true });
        if (this.slideHistoryStack.length === 0) {
            Doc.UserDoc().isBranchingMode = false;
        }
        //PresBox.NavigateToTarget(targetDoc, targetDoc);
    };

    @computed get trailBreadcrumbs() {
        return (
            <div style={{ border: '.5rem solid green', padding: '5px', backgroundColor: 'white', minHeight: '50px', minWidth: '1000px' }}>
                {this.slideHistoryStack.map((info, index) => {
                    const [presId, targetDocId] = info.split(',');
                    const doc = this.docIdToDocMap.get(targetDocId);
                    if (!doc) {
                        return <></>;
                    }
                    return (
                        <span key={targetDocId}>
                            <button key={index} onPointerDown={e => this.clickHandler(e, targetDocId, index)}>
                                {presId.slice(0, 3) + ':' + doc.title}
                            </button>
                            -{'>'}
                        </span>
                    );
                })}
            </div>
        );
    }

    render() {
        return <div>{BranchingTrailManager.Instance.trailBreadcrumbs}</div>;
    }
}