import React, { useRef, useEffect } from "react";
/* global google */

export default ({ onMarkerMoved }) => {
  const mapDivRef = useRef(null);
  const mapRef = useRef(null);
  const markerRef = useRef(null);

  useEffect(() => {
    if (mapRef.current) {
      console.log("Attempted to re-run effect with existing Map");
      return;
    }
    
    mapRef.current = new google.maps.Map(mapDivRef.current, {
      center: { lat: 25, lng: -25 },
      zoom: 0,
      disableDefaultUI: true,
      fullscreenControl: true,
    });

    if (onMarkerMoved) {
      mapRef.current.addListener("click", ({ latLng }) => {
        if (markerRef.current) {
          markerRef.current.setMap(null);
        }
        markerRef.current = new google.maps.Marker({ map: mapRef.current, position: latLng });
        console.log({ lat: latLng.lat(), lng: latLng.lng() });
        onMarkerMoved({ lat: latLng.lat(), lng: latLng.lng() });
      });
    }
  }, [onMarkerMoved]);

  return <div className="map-div" ref={mapDivRef} />
}