import { action, computed, IReactionDisposer, observable } from "mobx";
import { observer } from "mobx-react";
import { Transaction } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import * as React from "react";
import { Doc, DocListCast, Opt } from "../../../../fields/Doc";
import { documentSchema } from "../../../../fields/documentSchemas";
import { Id } from "../../../../fields/FieldSymbols";
import { createSchema, makeInterface } from "../../../../fields/Schema";
import { Cast, NumCast } from "../../../../fields/Types";
import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
import { DragManager } from "../../../util/DragManager";
import { CollectionViewType } from "../../collections/CollectionView";
import { TabDocView } from "../../collections/TabDocView";
import { ViewBoxAnnotatableProps, ViewBoxAnnotatableComponent } from "../../DocComponent";
import { AnchorMenu } from "../../pdf/AnchorMenu";
import { FieldView, FieldViewProps } from "../FieldView";
import { FormattedTextBox } from "../formattedText/FormattedTextBox";
import { RichTextMenu } from "../formattedText/RichTextMenu";
import { PresMovement } from "../PresBox";

type MarkerDocument = makeInterface<[typeof documentSchema]>;
const MarkerDocument = makeInterface(documentSchema);

export type Coordinates = {
    lat: number,
    lng: number,
}

@observer
export class MapMarker extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps, MarkerDocument>(MarkerDocument) {
    makeLinkAnchor(arg1: string, undefined: undefined, arg3: string) {
        throw new Error("Method not implemented.");
    }
    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MapMarker, fieldKey); }
    private _markerRef: React.RefObject<google.maps.Marker> = React.createRef();
    private _disposers: { [name: string]: IReactionDisposer } = {};
    _latlngLocation!: Coordinates;
    _markerId!: number;
    private _editorView: Opt<EditorView> // we'll see if this becomes useful for marker annotation/create link
    @observable _title: string = ""; // the title of the marker
    @observable _description: string = ""; // the description of the marker contents
    @observable isMarkerActive: boolean = false; // whether the marker is selected (we'll see if we need this)
    @observable activeLinks: Doc[] = []; //TBD: what linking data structure looks like
    @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); } // a list of documents with the same/similar geographic coordinates
    @computed get tagDocs() { // might come in handy for filtering
        const tagDocs: Doc[] = [];
        for (const doc of this.childDocs) {
            const tagDoc = Cast(doc.presentationTargetDoc, Doc, null);
            tagDocs.push(tagDoc);
        }
        return tagDocs;
    }


    /**
     * Methods
     */
    componentDidMount() { }

    componentWillMount() { }

    @computed private get filterAssociatedDocs() {
        return
    }

    addLinkToMarker = () => { }



    @action
    setupAnchorMenu = () => {
        AnchorMenu.Instance.Status = "marquee";
        AnchorMenu.Instance.Highlight = action((color: string, isLinkButton: boolean) => {
            this._editorView?.state && RichTextMenu.Instance.insertHighlight(color, this._editorView.state, this._editorView?.dispatch);
            return undefined;
        });
        /**
         * This function is used by the PDFmenu to create an anchor highlight and a new linked text annotation.  
         * It also initiates a Drag/Drop interaction to place the text annotation.
         */
        AnchorMenu.Instance.StartDrag = action(async (e: PointerEvent, ele: HTMLElement) => {
            e.preventDefault();
            e.stopPropagation();
            const targetCreator = (annotationOn?: Doc) => {
                const target = CurrentUserUtils.GetNewTextDoc("Note linked to " + this.rootDoc.title, 0, 0, 100, 100, undefined, annotationOn);
                FormattedTextBox.SelectOnLoad = target[Id];
                return target;
            };

            // DragManager.StartAnchorAnnoDrag([ele], new DragManager.AnchorAnnoDragData(this.props.docViewPath().lastElement(), this.getAnchor, targetCreator), e.pageX, e.pageY);
        });
        const coordsB = this._editorView!.coordsAtPos(this._editorView!.state.selection.to);
        this.props.isSelected(true) && AnchorMenu.Instance.jumpTo(coordsB.left, coordsB.bottom);
    }

    // will see if end up using this
    dispatchTransaction = (tx: Transaction) => { }


    //will see if needed
    // for inserting timestamps
    insertTime = () => { }

    //for setting the title of the marker
    @action
    private updateTitle = () => { }

    //for updating the description of the marker
    @action
    private updateDescrption = () => { }



}