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);

  useEffect(() => {
    if (mapRef.current && !map) {
      const initialMap = L.map(mapRef.current, {
        center: [53.111111, 8.4625],
        zoom: 10,
      });

      initialMap.on("contextmenu", (event) => {
        L.popup()
          .setLatLng(event.latlng)
          .setContent(
            '<p>Right-click menu<br/><button onclick="zoomIn()">Zoom in</button></p>'
          )
          .openOn(initialMap);
      });

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

      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);

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

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

export default MapComponent;