import { Controller } from '@hotwired/stimulus';
import 'leaflet';

export default class extends Controller {
    static values = {
        geojson: String,
    }

    connect() {
        var map = L.map(this.element);
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);
        var layer = L.featureGroup();
        var geojsons = JSON.parse(this.geojsonValue);
        if (geojsons.length > 0) {
            geojsons.forEach(function (geojson) {
                const feature0 = geojson.features[0].properties;
                L.geoJSON(geojson, {
                    style: function (feature) {
                        var color = 'blue';
                        switch (feature.properties.color) {
                            case 'danger' : color = '#dc3545'; break
                            case 'warning' : color = '#ffc107'; break
                            case 'success' : color = '#198754'; break
                        }
                        return {color: color};
                    }
                }).bindTooltip(feature0.name).addTo(layer).on('click', function (event) {
                    window.location.href = event.layer.feature.properties.url;
                });
            });
            layer.addTo(map);
            console.log(layer.getBounds().toBBoxString());
            map.fitBounds(layer.getBounds());
        }
    }
}