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

function InputGoogleMaps(props) {
  const containerStyle = {
    width: "500px",
    height: "500px",
  };

  const center = {
    lat: props.coordinates[0],
    lng: props.coordinates[1],
  };
  const [visibility, setVisibility] = useState(true);

  const handleMapClick = (event) => {
    const location = {
      lat: event.latLng.lat(),
      lng: event.latLng.lng(),
    };
    if (event.placeId) {
      setVisibility(false);
      props.setCoordinates([location.lat, location.lng], event.placeId);
    } else {
      setVisibility(true);
      props.setCoordinates([location.lat, location.lng]);
    }
  };

  return (
    <LoadScript googleMapsApiKey="AIzaSyDAlZSiBanP52qpZ1kaH06XkuA2zndLUd8">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={7}
        onClick={handleMapClick}
      >
        <Marker
          position={{ lat: props.coordinates[0], lng: props.coordinates[1] }}
          visible={visibility}
        />
      </GoogleMap>
    </LoadScript>
  );
}

export default React.memo(InputGoogleMaps);