import React from 'react'
import { GoogleMap, useJsApiLoader, Marker } from '@react-google-maps/api';

export interface Props {
    location: {
        lat: number,
        lng: number
    },
    //zoom: number,
}

const containerStyle = {
  width: '600px',
  height: '400px'
};

const GoogleMapComponent: React.FC<Props> = ({
 location,
// zoom = 12,
}: Props) => {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: process.env.GOOGLE_MAP_API_KEY
  })

  const [map, setMap] = React.useState(null)
  console.log(location)

  const onLoad = React.useCallback(function callback(map) {
    const bounds = new window.google.maps.LatLngBounds(location);
    map.fitBounds(bounds);
    setMap(map)
  }, [])

  const onUnmount = React.useCallback(function callback(map) {
    setMap(null)
  }, [])

  return isLoaded ? (
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={location}
        onLoad={onLoad}
        onUnmount={onUnmount}
        zoom={12}
      >
        { /* Child components, such as markers, info windows, etc. */ }
        {/* <Marker position={location}/> */}
      </GoogleMap>
  ) : <></>
}

export default React.memo(GoogleMapComponent)