---
const {
    apiKey,
    lat,
    lon,
    zoom = 15,
    title = "",
    description = "",
} = Astro.props;
import "../../styles/map-google.css";
---

<div class="fuz-map-wrapper">
    <div
        id="fuz-map-google"
        class="fuz-map-google"
        data-lat={lat}
        data-lon={lon}
        data-title={title}
        data-description={description}
    >
    </div>
</div>
<!-- TODO: Popracować nad wygladem markera -->
<script is:inline>
    window.initFuzGoogleMap = function () {
        const el = document.getElementById("fuz-map-google");
        if (!el) return;

        const lat = Number(el.dataset.lat);
        const lon = Number(el.dataset.lon);
        const title = el.dataset.title || "";
        const desc = el.dataset.description || "";

        const map = new google.maps.Map(el, {
            zoom: Number(`{{zoom}}`) || 15,
            center: { lat, lng: lon },
            mapTypeControl: false,
            scrollwheel: false,
            zoomControl: true,
            streetViewControl: false,
        });

        const infowindow = new google.maps.InfoWindow({
            content: `<div class="fuz-map-infowindow"><b>${title}</b><br/>${desc}</div>`,
        });

        const marker = new google.maps.Marker({
            position: { lat, lng: lon },
            map,
            title,
        });

        marker.addListener("click", () => {
            infowindow.open({
                map,
                anchor: marker,
                shouldFocus: false,
            });
        });

        // auto-open popup on load
        setTimeout(() => {
            infowindow.open({
                map,
                anchor: marker,
                shouldFocus: false,
            });
        }, 100);

        // Light fade-in
        el.classList.add("loaded");
    };
</script>

<script
    async
    src={`https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=initFuzGoogleMap`}
></script>
