'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 layerSiti = await this.loadLayer('siti.geojson', '#800040');
    let layerVincoli = await this.loadLayer('vincoli.geojson');
    // TODO named parameters??
    let layerPaesistici = await this.loadLayer('paesistici.geojson', '#222', '#ff8000');
    let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxNativeZoom : 22,
        maxZoom: 22,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });
    let map = L.map(mapId, {
        attributionControl: false,
        minZoom: 11,
        layers: [osmap, layerVincoli, layerSiti, layerPaesistici]
    }).setView([40.5492, 14.2317], zoomLevel);

    map.crs = L.CRS.EPSG4326;

    const baseMap = {
        "Mappa di base (OpenStreetMap)" : osmap
    };
    const archeo = {
        "Siti indagati" : layerSiti,
        "Vincoli archeologici" : layerVincoli,
        "Vincoli paesistici" : layerPaesistici,
    };

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

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

    // DEBUG
    console.log(data.features);

    // Show data from feature in popUp?
    const layer = new L.geoJson(data, {
        style: function (feature) {
            let style = {
                color: color,
                opacity: 0.8,
                weight: 1,
                fillColor: fillColor,
                fillOpacity: 0.8
            };
            return style;
        },
        onEachFeature: function (feature, layer) {
            layer.bindPopup(GIS.featurePopup(geoJSON, feature));
        }
    });

    return layer;
}
/**
 * Generate proper content for features popup
 * @todo Hard-coded names!!
 * 
 * @param {string} layerName
 * @param {object} feature
 * @returns {string} The popup's content
 */
GIS.featurePopup = function (layerName, feature) {
    const content = {
        'vincoli.geojson' : `
                <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>
            `,
        'paesistici.geojson' : `
                <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 content[layerName];
}

export default GIS;