import { InfoWindow } from '@react-google-maps/api';
import { action } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../../fields/Doc';
import { Id } from '../../../../fields/FieldSymbols';
import { emptyFunction, returnAll, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents } from '../../../../Utils';
import { Docs } from '../../../documents/Documents';
import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
import { CollectionNoteTakingView } from '../../collections/CollectionNoteTakingView';
import { CollectionStackingView } from '../../collections/CollectionStackingView';
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', { _layout_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 | CollectionNoteTakingView | null | undefined;
    childLayoutFitWidth = (doc: Doc) => doc.type === DocumentType.RTF;
    addDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.AddDocToList(this.props.place, 'data', d), true as boolean);
    removeDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.RemoveDocFromList(this.props.place, 'data', d), true as boolean);
    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)}
                            {...this.props}
                            setContentView={emptyFunction}
                            Document={this.props.place}
                            DataDoc={undefined}
                            fieldKey="data"
                            NativeWidth={returnZero}
                            NativeHeight={returnZero}
                            docFilters={returnEmptyFilter}
                            setHeight={emptyFunction}
                            isAnnotationOverlay={false}
                            select={emptyFunction}
                            NativeDimScaling={returnOne}
                            isContentActive={returnTrue}
                            chromeHidden={true}
                            rootSelected={returnFalse}
                            childHideResizeHandles={returnTrue}
                            childHideDecorationTitle={returnTrue}
                            childLayoutFitWidth={this.childLayoutFitWidth}
                            // childDocumentsActive={returnFalse}
                            removeDocument={this.removeDoc}
                            addDocument={this.addDoc}
                            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>
        );
    }
}