{% load static %}
{% load custom_tags %}
{% load i18n %}

<!-- add MapLibre JavaScript and CSS -->
<script src="{% settings_value "MAP_TILE_SERVER" %}/assets/lib/maplibre-gl/maplibre-gl.js"></script>
<link href="{% settings_value "MAP_TILE_SERVER" %}/assets/lib/maplibre-gl/maplibre-gl.css" rel="stylesheet"/>

<!-- add Turf see https://maplibre.org/maplibre-gl-js/docs/examples/draw-a-radius/ -->
<script src="{% static 'fellchensammlung/js/turf.min.js' %}"></script>

<!-- add container for the map -->
<div id="map" style="width:100%;aspect-ratio:16/9"></div>

<!-- start map -->
<script>
    {% if zoom_level %}
        var zoom_level = {{ zoom_level }};
    {% else %}
        var zoom_level = 4;
    {% endif %}

    {% if map_center %}
        var map_center = [{{ map_center.longitude | pointdecimal }}, {{ map_center.latitude | pointdecimal }}];
    {% else %}
        var map_center = [10.49, 50.68]; <!-- Point middle of Germany -->
        zoom_level = 4;  //Overwrite zoom level when no place is found
    {% endif %}

    let map = new maplibregl.Map({
        container: 'map',
        style: '{% static "fellchensammlung/map/styles/colorful/style.json" %}',
        center: map_center,
        zoom: zoom_level
    }).addControl(new maplibregl.NavigationControl());

    {% for adoption_notice in adoption_notices_map %}
        {% if adoption_notice.location %}
            // create the popup
            const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setHTML(`{% include "fellchensammlung/partials/partial-adoption-notice-minimal.html" %}`);

            // create DOM element for the marker
            const el_{{ forloop.counter }} = document.createElement('div');
            el_{{ forloop.counter }}.id = 'marker_{{ forloop.counter }}';
            el_{{ forloop.counter }}.classList.add('marker');

            const location_popup_{{ forloop.counter }} = [{{ adoption_notice.location.longitude | pointdecimal }}, {{ adoption_notice.location.latitude | pointdecimal }}];
            // create the marker
            new maplibregl.Marker({element: el_{{ forloop.counter }}})
                .setLngLat(location_popup_{{ forloop.counter }})
                .setPopup(popup_{{ forloop.counter }}) // sets a popup on this marker
                .addTo(map);
        {% endif %}
    {% endfor %}

    {% for rescue_organization in rescue_organizations %}
        {% if rescue_organization.location %}
            // create the popup
            const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setHTML(`{% include "fellchensammlung/partials/partial-rescue-organization.html" %}`);

            // create DOM element for the marker
            const el_{{ forloop.counter }} = document.createElement('div');
            el_{{ forloop.counter }}.id = 'marker_{{ forloop.counter }}';
            el_{{ forloop.counter }}.classList.add('animal-shelter-marker', 'marker');

            const location_popup_{{ forloop.counter }} = [{{ rescue_organization.location.longitude | pointdecimal }}, {{ rescue_organization.location.latitude | pointdecimal }}];
            // create the marker
            new maplibregl.Marker({element: el_{{ forloop.counter }}})
                .setLngLat(location_popup_{{ forloop.counter }})
                .setPopup(popup_{{ forloop.counter }}) // sets a popup on this marker
                .addTo(map);
        {% endif %}
    {% endfor %}

    map.on('load', async () => {
        image = await map.loadImage('{% static "fellchensammlung/img/pin.png" %}');
        map.addImage('pin', image.data);
        {% for map_pin in map_pins %}
            map.addSource('point_{{ forloop.counter }}', {
                'type': 'geojson',
                'data': {
                    'type': 'FeatureCollection',
                    'features': [
                        {
                            'type': 'Feature',
                            'geometry': {
                                'type': 'Point',
                                'coordinates': [{{ map_pin.location.longitude | pointdecimal }}, {{ map_pin.location.latitude | pointdecimal }}]
                            }
                        }
                    ]
                }
            });
            map.addLayer({
                'id': 'point_{{ forloop.counter }}',
                'type': 'circle',
                'source': 'point_{{ forloop.counter }}',
                'paint': {
                    'circle-radius': 18,
                    'circle-color': '#ff878980'
                }
            });
        {% endfor %}
    });

    {% if search_center  %}
        var search_center = [{{ search_center.longitude | pointdecimal }}, {{ search_center.latitude | pointdecimal }}];
        map.on('load', () => {
            const radius = {{ search_radius }}; // kilometer
            const options = {
                steps: 64,
                units: 'kilometers'
            };
            const circle = turf.circle(search_center, radius, options);

            // Add the circle as a GeoJSON source
            map.addSource('location-radius', {
                type: 'geojson',
                data: circle
            });

            // Add a fill layer with some transparency
            map.addLayer({
                id: 'location-radius',
                type: 'fill',
                source: 'location-radius',
                paint: {
                    'fill-color': 'rgba(140,207,255,0.3)',
                    'fill-opacity': 0.5
                }
            });

            // Add a line layer to draw the circle outline
            map.addLayer({
                id: 'location-radius-outline',
                type: 'line',
                source: 'location-radius',
                paint: {
                    'line-color': '#0094ff',
                    'line-width': 3
                }
            });
        });
    {% endif %}

</script>
