import { GoogleMap, Marker, InfoWindow, LoadScript, GoogleMapProps } from '@react-google-maps/api';
import { action, computed, Lambda, runInAction } from "mobx";
import { observer } from "mobx-react";
import { Doc, DocListCast, Field, FieldResult, Opt } from "../../../fields/Doc";
import { documentSchema } from "../../../fields/documentSchemas";
import { Id } from "../../../fields/FieldSymbols";
import { makeInterface } from "../../../fields/Schema";
import { Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types";
import { LinkManager } from "../../util/LinkManager";
import { undoBatch, UndoManager } from "../../util/UndoManager";
import "./CollectionMapView.scss";
import { CollectionSubView } from "./CollectionSubView";
import React = require("react");
import requestPromise = require("request-promise");

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

export type LocationData = google.maps.LatLngLiteral & {
    address?: string
    resolvedAddress?: string;
    zoom?: number;
};

const mapContainerStyle = {
    width: '100%',
    heiht: '100%',
    overflow: 'hidden',
};


const defaultCenter = {
    lat: 0,
    lng: 0,
}
//-----------------------------test map marker-----------------------------------
// const map = new google.maps.Map(document.getElementById('map')!, {
//     zoom: 10,
//     center: new google.maps.LatLng(-33.92, 151.25),
//     mapTypeId: google.maps.MapTypeId.ROADMAP
// });

// // test display markers
// let locations = [
//     ['Bondi Beach', -33.890542, 151.274856, 4],
//     ['Coogee Beach', -33.923036, 151.259052, 5],
//     ['Cronulla Beach', -34.028249, 151.157507, 3],
//     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
//     ['Maroubra Beach', -33.950198, 151.259302, 1]
// ];

// const infowindow = new google.maps.InfoWindow();
// let marker: google.maps.Marker
// let i: number

// for (i = 0; i < locations.length; i++) {
//     marker = new google.maps.Marker({
//         position: new google.maps.LatLng(locations[i][1] as number, locations[i][2] as number),
//         map: map
//     });

//     google.maps.event.addListener(marker, 'click', (function (marker, i) {
//         return function () {
//             infowindow.setContent(locations[i][0] as string);
//             infowindow.open(map, marker);
//         }
//     })(marker, i));
// }

//----------------------------------------------------------------

@observer
export default class CollectionMapView extends CollectionSubView<MapSchema, GoogleMapProps>(MapSchema) {


    render() {
        const { childLayoutPairs } = this;
        const { Document, fieldKey, isContentActive: active } = this.props;

        // const { isLoaded, loadError } = useLoadScript({
        //     googleMapsApiKey: 'AIzaSyALJU8DfCAqEAS0OqMDCmkE0otlz4H81fg',
        //     libraries: ['places']
        // })

        // if (loadError) return "Error loading maps";
        // if (!isLoaded) return "Loading Maps";


        return <div className="collectionMapView" ref={this.createDashEventsTarget}>
            <LoadScript
                googleMapsApiKey={process.env.GOOGLE_MAPS!}
                libraries={['places']}
            >
                <div className={"collectionMapView-contents"}
                    style={{ pointerEvents: active() ? undefined : "none", overflow: 'hidden' }}
                    onWheel={e => e.stopPropagation()}
                    onPointerDown={e => (e.button === 0 && !e.ctrlKey) && e.stopPropagation()} >

                    <GoogleMap
                        mapContainerStyle={mapContainerStyle}
                        zoom={5}
                        center={defaultCenter}
                    >
                        <Marker
                            // name={'SOMA'}
                            position={{ lat: 37.778519, lng: -122.405640 }} />
                        <Marker
                            // name={'Dolores park'}
                            position={{ lat: 47.617701, lng: -122.359485 }} />

                    </GoogleMap>

                </div>
            </LoadScript >
        </div >;
    }

}

// export default GoogleApiWrapper({
//     // apiKey: process.env.REACT_APP_DASH_GOOGLE_MAPS_API_KEY!,
//     apiKey: 'AIzaSyALJU8DfCAqEAS0OqMDCmkE0otlz4H81fg',
//     LoadingContainer: () => {
//         console.log(process.env.REACT_APP_DASH_GOOGLE_MAPS_API_KEY);
//         return <div className={"loadingWrapper"}>
//             <img className={"loadingGif"} src={"/assets/loading.gif"} />
//         </div>;
//     }
// })(CollectionMapView) as any;