import L from "leaflet";
import "leaflet/dist/leaflet.css";

document.addEventListener("DOMContentLoaded", function () {
    var map = L.map("map").setView([-6.9175, 107.6191], 10); // Bandung

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "© OpenStreetMap contributors",
    }).addTo(map);

    // Dapatkan elemen loading
    const loadingDiv = document.getElementById("loading");
    loadingDiv.style.display = "flex"; // Tampilkan loading

    fetch("/storage/maps/rencana-polaruang.geojson")
        .then((res) => res.json())
        .then((geojson) => {
            let colorMapping = {
                "Kawasan Pariwisata": "#ff6600", // Orange
                "Kawasan Industri": "#0000ff", // Biru
                "Kawasan Pemukiman": "#ff0000", // Merah
                "Kawasan Hutan": "#008000", // Hijau
                "Kawasan Pertanian": "#ffff00", // Kuning
            };
            var geoLayer = L.geoJSON(geojson, {
                style: function (feature) {
                    let name = feature.properties.Name; // Ambil properti Name

                    console.log("Zone Type:", name);

                    return {
                        color: "#333333", // Warna garis
                        fillColor: colorMapping[name] || "#cccccc", // Gunakan warna dari mapping
                        fillOpacity: 0.6,
                        weight: 1.5,
                    };
                },
                onEachFeature: function (feature, layer) {
                    if (feature.properties && feature.properties.name) {
                        layer.bindPopup(feature.properties.name);
                    }
                },
            }).addTo(map);

            map.fitBounds(geoLayer.getBounds());

            // Sembunyikan loading setelah selesai render
            loadingDiv.style.display = "none";
        })
        .catch((error) => {
            console.error("Error loading GeoJSON:", error);
            loadingDiv.innerHTML =
                "<div class='loading-text' style='background: red;'>Failed to load data!</div>";
        });
});