import GoogleMapReact from "google-map-react"
import { InfoWindow } from "../../../components/map/infoWindow";



// Marker component
const Marker = (props) => {
  const { place } = props
  const show=place.show
  const markerStyle = {
      border: '1px solid white',
      borderRadius: '50%',
      height: 10,
      width: 10,
      backgroundColor: show ? 'red' : 'blue',
      cursor: 'pointer',
      zIndex: 10,
    };

    return (
      <>
        <div style={markerStyle} />
        {place.show && <InfoWindow {...props} />}
      </>
    );
  };

const MY_API_KEY = process.env.API_KEY

export default function WebMapView (props){
    const { places, navigation } = props
    return(
        <GoogleMapReact
            bootstrapURLKeys={{
                key: MY_API_KEY,
            }}
            defaultZoom={10}
            defaultCenter={[49.41273, 2.81853]}
            onChildClick={props.updateState}
            >
            {places.map((place) => {
                return(
                    <Marker
                        key={place.id}
                        lat={place.geometry.location.lat}
                        lng={place.geometry.location.lng}
                        {...props}
                    />
            )})}
        </GoogleMapReact>

    )
}