import React, { useEffect, useRef, useState } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

const MapComponent = () => {
  const mapRef = useRef(null);
  const [map, setMap] = useState(null);

  function addMarker(map) {
    const marker = L.marker([53.111111, 8.4625]).addTo(map);
    marker.bindPopup("<b>Hallo Welt!</b><br>Ich bin ein Popup.").openPopup();
  }

  useEffect(() => {
    if (mapRef.current && !map) {
      const initialMap = L.map(mapRef.current, {
        center: [53.111111, 8.4625],
        zoom: 10,
        zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
      });

      initialMap.on("contextmenu", (event) => {
        L.popup()
          .setLatLng(event.latlng)
          .setContent(
            `
            <p>
              <button onclick="zoomIn()">Zoom in</button>
              <button onclick="zoomOut()">Zoom out</button>
              <button onclick="centerHere(${event.latlng.lat}, ${event.latlng.lng})">Hier zentrieren</button>
            </p>`
          )
          .openOn(initialMap);
      });

      window.zoomIn = () => {
        initialMap.zoomIn();
      };

      window.zoomOut = () => {
        initialMap.zoomOut();
      };

      window.centerHere = (lat, lng) => {
        initialMap.panTo(new L.LatLng(lat, lng));
      };

      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(initialMap);
      addMarker(initialMap);

      setMap(initialMap);
    }
  }, [mapRef, map]);

  return (
    <div
      id="map"
      ref={mapRef}
      style={{ height: "100vh", width: "100vw", overflow: "hidden" }}
    ></div>
  );
};

export default MapComponent;