<script lang="ts">
  import * as L from 'leaflet';
  import 'leaflet/dist/leaflet.css';
  import { onMount, type Snippet } from "svelte";
  import type { SvelteHTMLElements } from "svelte/elements";

  type Props = {
    x: number,
    y: number,
    children?: Snippet,
  } & SvelteHTMLElements['div']

  let { x, y, children, ...rest }: Props = $props();

  let mapDiv: HTMLDivElement;
  let popupDiv: HTMLDivElement;
  let map: L.Map;

  onMount(() => {
    map = L.map(mapDiv).setView([x, y], 13);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
    const marker = L.marker([x, y]).addTo(map);
    if (children !== undefined)
      marker.bindPopup(popupDiv, { closeOnClick: false }).openPopup();
  });
</script>

<div bind:this={mapDiv} {...rest}>
</div>
<div class="hidden">
  <div bind:this={popupDiv} class="h-full w-full">
    {@render children?.()}
  </div>
</div>