import { InfoWindow } from '@react-google-maps/api';
import { action, computed } from 'mobx';
import { observer } from "mobx-react";
import * as React from "react";
import { Doc } from '../../../../fields/Doc';
import { Id } from '../../../../fields/FieldSymbols';
import { emptyFunction, OmitKeys, returnAll, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents } from '../../../../Utils';
import { Docs } from '../../../documents/Documents';
import { DocumentType } from '../../../documents/DocumentTypes';
import { CollectionStackingView } from '../../collections/CollectionStackingView';
import { CollectionViewType } from '../../collections/CollectionView';
import { ViewBoxAnnotatableProps } from '../../DocComponent';
import { FieldViewProps } from '../FieldView';
import { FormattedTextBox } from '../formattedText/FormattedTextBox';
import "./MapBox.scss";


interface MapBoxInfoWindowProps {
    place: Doc;
    renderDepth: number;
    markerMap: { [id: string]: google.maps.Marker };
    isAnyChildContentActive: () => boolean;
}
@observer
export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & ViewBoxAnnotatableProps & FieldViewProps>{

    @action
    private handleInfoWindowClose = () => {
        if (this.props.place.infoWindowOpen) {
            this.props.place.infoWindowOpen = false;
        }
        this.props.place.infoWindowOpen = false;
    }

    addNoteClick = (e: React.PointerEvent) => {
        setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => {
            const newBox = Docs.Create.TextDocument("Note", { _autoHeight: true });
            FormattedTextBox.SelectOnLoad = newBox[Id];// track the new text box so we can give it a prop that tells it to focus itself when it's displayed
            Doc.AddDocToList(this.props.place, "data", newBox);
            this._stack?.scrollToBottom();
            e.stopPropagation();
            e.preventDefault();
        });
    }


    _stack: CollectionStackingView | null | undefined;

    // Collection stacking view for documents in the infowindow of a map marker
    @computed get renderChildDocs() {
        return;
    }
    render() {
        return <InfoWindow anchor={this.props.markerMap[this.props.place[Id]]} onCloseClick={this.handleInfoWindowClose} >
            <div className="mapbox-infowindow">
                <div style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }}>
                    <CollectionStackingView
                        ref={r => this._stack = r}
                        {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
                        Document={this.props.place}
                        DataDoc={undefined}
                        fieldKey="data"
                        CollectionView={undefined}
                        NativeWidth={returnZero}
                        NativeHeight={returnZero}
                        docFilters={returnEmptyFilter}
                        setHeight={emptyFunction}
                        isAnnotationOverlay={false}
                        select={emptyFunction}
                        scaling={returnOne}
                        isContentActive={returnTrue}
                        chromeHidden={true}
                        rootSelected={returnFalse}
                        childHideResizeHandles={returnTrue}
                        childHideDecorationTitle={returnTrue}
                        childFitWidth={doc => doc.type === DocumentType.RTF}
                        // childDocumentsActive={returnFalse}
                        removeDocument={(doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.RemoveDocFromList(this.props.place, "data", d), true as boolean)}
                        addDocument={(doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.AddDocToList(this.props.place, "data", d), true as boolean)}
                        renderDepth={this.props.renderDepth + 1}
                        viewType={CollectionViewType.Stacking}
                        pointerEvents={returnAll}
                    />
                </div>
                <hr />
                <div onPointerDown={this.addNoteClick} onClick={e => { e.stopPropagation(); e.preventDefault(); }} >
                    Add Note
                </div>
            </div>
        </InfoWindow>;
    }
}