import React from "react";
import ReactDOM from "react-dom";
import InteractiveMap, { Marker } from "react-map-gl";

function Mapbox() {
  const [markers, setMarkers] = React.useState([]);
  const handleClick = ({ lngLat: [longitude, latitude] }) =>
    setMarkers(markers => [...markers, { longitude, latitude }]);
  const [viewport, setViewport] = React.useState({
    latitude: 52,
    longitude: 20,
    zoom: 5,
    pitch: 0,
    bearing: 0
  });
  return (
    <InteractiveMap
      onClick={handleClick}
      width="100vw"
      height="85vh"
      mapboxApiAccessToken="pk.eyJ1IjoiZm90c29mbHkiLCJhIjoiY2s4a21uc3dwMDJxcjNlcDZpcm1iMm9qNSJ9.p4MiDyUSYOZH6Y1gtlQMCw"
      onViewportChange={viewport => setViewport(viewport)}
      {...viewport}
    >
      {markers.length
        ? markers.map((m, i) => (
            <Marker {...m} key={i}>
              {`Clicked here: \n ${m.longitude}, ${m.latitude}`}
            </Marker>
          ))
        : null}
    </InteractiveMap>
  );
}

export default Mapbox;