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

const GoogleMaps = ({
    apiKey,
    containerClass,
    defaultZoom,
    isMarkerDraggable,
    latitude,
    longitude,
    mapCenter,
    setCoordinates,
}) => {
    const hasCoordinates = !!latitude && !!longitude;

    const handleEndDragMarker = (e) => {
        if (!e.latLng) { return; }

        const { lat, lng } = e.latLng;

        setCoordinates({
            latitude: lat(),
            longitude: lng(),
        });
    };

    return (
        <LoadScriptNext
            id="script-loader"
            googleMapsApiKey={apiKey}
        >
            <GoogleMap
                center={ mapCenter }
                id='example-map'
                mapContainerClassName={containerClass}
                zoom={ defaultZoom }
                options= {
                    {
                        streetViewControl: false,
                        controlSize: 24,
                    }
                }
            >
                {
                    hasCoordinates &&
                    <Marker
                        draggable={ isMarkerDraggable }
                        onDragEnd={ handleEndDragMarker }
                        position={{ lat: latitude, lng: longitude }}
                    />
                }
            </GoogleMap>
      </LoadScriptNext >
     )
}

export default GoogleMaps;