'use strict';
// Global leaflet
/**
 * @namespace GIS
 */
const GIS = {};

const BASE_URL = location.href;

/**
 * @param {string} mapId
 * @param {number} zoomLevel
 * @returns {Map}
 */
GIS.initMap = async function (mapId, zoomLevel = 15) {
    let layerVincoli = await this.loadLayer('vincoli.geojson');
    let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });
    let map = L.map(mapId, {
        attributionControl: false,
        minZoom: 6,
        layers: [osmap, layerVincoli]
    }).setView([40.5492, 14.2317], zoomLevel);

    map.crs = L.CRS.EPSG4326;

    const baseMap = {
        "Mappa di base (OpenStreetMap)" : osmap
    };
    const archeoConstraints = {
        "Vincoli archeologici" : layerVincoli
    };

    let layerControl = L.control.layers(baseMap, archeoConstraints).addTo(map);

    //DEBUG
    // Il sistema di riferimento per i livelli geoJSON è EPSG3857
}
/**
 * @param {string} geoJSON 
 * @param {Map} map 
 */
GIS.loadLayer = async function (geoJSON, color = '#987db7') {
    const data = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
        .then(res => res.json())
        .catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));

    console.log(data.features);

    // Show data from feature in popUp?
    const layer = new L.geoJson(data, {
        style: function (feature) {
            let style = {
                color: '#222',
                opacity: 0.8,
                weight: 1,
                fillColor: color,
                fillOpacity: 0.8
            };
            return style;
        },
        onEachFeature: function (feature, layer) {
            layer.bindPopup(`
                <table class="table m-2">
                <tr><td class="text-bold">Oggetto</td><td>${feature.properties.OGGETTO}</td></tr>
                <tr><td class="text-bold">Anno</td><td>${feature.properties.ANNO}</td></tr>
                <tr><td class="text-bold">Comune</td><td>${feature.properties.COMUNE}</td></tr>
                <tr><td class="text-bold">Proprietà</td><td>${feature.properties.PROPRIETA}</td></tr>
                </table>
            `);
        }
    });

    return layer;
}

export default GIS;