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

const containerStyle = {
  width: "650px",
  height: "400px",
};

type props = {
  lat: number;
  lon: number;
  setLat: (lat: number) => void;
  setLon: (lon: number) => void;
};

const GoogleMaps: FC<props> = ({ lat, lon, setLat, setLon }) => {
  const latLon = {
    lat: lat,
    lng: lon,
  };
  const [center, setCenter] = useState(latLon);
  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: "AIzaSyDrDy0Ndxv69lmuUOhzxpALW1zur2_9o3w",
  });

  const [map, setMap] = React.useState(null);

  const onLoad = React.useCallback(function callback(map: any) {
    // This is just an example of getting and using the map instance!!! don't just blindly copy!
    const bounds = new window.google.maps.LatLngBounds(center);
    map.fitBounds(bounds);

    setMap(map);
  }, []);

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

  const getCoord = (event: any) => {
    setLat(event?.latLng?.lat());
    setLon(event?.latLng?.lng());
    setCenter((prev) => ({
      ...prev,
      lat: event?.latLng?.lat(),
      lng: event?.latLng?.lng(),
    }));
  };

  return isLoaded ? (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={10}
      onLoad={onLoad}
      onUnmount={onUnmount}
      onClick={(event) => getCoord(event)}
    >
      <Marker position={center} />
    </GoogleMap>
  ) : (
    <>Loading Map...</>
  );
};

export default React.memo(GoogleMaps);