import { useState } from "react"

import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet'

const NZ_BOUNDS = [
  [-47.204642, 165.344238],
  [-34.307144, 179.824219]
]

function LocationMarker(props) {
  const [position, setPosition] = useState(null)
  const map = useMapEvents({
    click(e) {
      const newPosition = e.latlng;
      setPosition(newPosition);
      props.updateFilterState({"coordinates": newPosition});
      props.setNextDisabled(false);
    }
  })

  map.whenReady(() => {
    const savedCoordinates = props.filters["coordinates"];
    if (!position && savedCoordinates) {
      setPosition(savedCoordinates);
      props.setNextDisabled(false);
      map.flyTo(savedCoordinates, 9)
    }
  })

  return position === null ? null : (
    <Marker position={position}>
      <Popup>
        <strong>Latitude:</strong> {position.lat} <br/>
        <strong>Longitude:</strong> {position.lng}
        </Popup>
    </Marker>
  )
}

const fitNZBounds = (map) => {
  map.fitBounds(NZ_BOUNDS);
}

export default function Map(props) {
  return (
    <div className="map-container">
      <MapContainer scrollWheelZoom={true} whenCreated={fitNZBounds}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <LocationMarker {...props} />
      </MapContainer>
    </div>
  )
}