import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
import L from 'leaflet';
import './App.css'
import { useCallback, useState } from 'react';


function App() {
	const [coords, setCoords] = useState([0, 0])
	const [nextLabel, setNextLabel] = useState("Clicked Marker")
	const [markers, setMarkers] = useState([
		{label: "Spawn", x:0, y: 0}
	])

	let map = useCallback((it : L.Map|null) => {
		if (it == null) return;
		it.on('mousemove', (e) => {setCoords([Math.round(e.latlng.lat), Math.round(e.latlng.lng)])})
		it.on('click', (e) => {setMarkers([...markers, {label: nextLabel, x: e.latlng.lng, y: e.latlng.lat}])})
	}, [markers, nextLabel]);
	return (
		<>
			<MapContainer id="map"
				center={[0, 0]}
				maxBounds={[[-8000,-8000],[8000,8000]]}
				crs={L.CRS.Simple}
				zoom={-4}
				ref={map}
			>
				<TileLayer
					url="/tiles/{z}/{x}_{y}.png"
					tileSize={512}
					minZoom={-4}
					maxNativeZoom={-1}
				/>
				{/* COORDS ARE Minecraft’s [-y, x] */}
				{
					markers.map((it, i) =>
					(<Marker key={i} position={[it.y, it.x]}>
						<Popup>
							{it.label}
						</Popup>
					</Marker>))
				}
			</MapContainer>
			<p>Mouse is at {coords[1]}, {-coords[0]}</p>
			<input id="label" type="text" onChange={(e) => setNextLabel(e.target.value)} value={nextLabel}/>
		</>
	)
}

export default App