import { useState } from "react"

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

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

function LocationMarker() {
  const [position, setPosition] = useState(null)
  useMapEvents({
    click(e) {
      setPosition(e.latlng)
    },
  })

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

function FitNewZealandBounds() {
  const map = useMap()
  map.fitBounds(NZ_BOUNDS)
  return null
}

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