import * as L from "./lib/leaflet/leaflet-src.esm.js"
import { PlaceDatabase } from "./places.js";
import "./lib/turf/turf.js"

let map = null;
/** @type {PlaceDatabase| null} */
let places = null;

export async function init(){
    /** Le centre de la carte */
    let map_center = null
    /** Les bords de la carte */
    let map_bounds = null

    map = L.map(document.getElementById("map"), {
        attributionControl: false,
        zoomControl: false
    })

    L.control.attribution({
        position: 'topright'
    }).addTo(map)

    await Promise.all([
        // Point définissant le centre de la carte
        fetch("./couches/centre.geojson").then(res => res.json()).then(geojson => {
            map_center = L.latLng([...geojson.features[0].geometry.coordinates].reverse())
            console.log("Centre:", map_center)
        }),
        // Polygone définissant les limites de la carte
        fetch("./couches/emprise.geojson").then(res => res.json()).then(geojson => {
            let coordinate_list = geojson.features[0].geometry.coordinates[0]
            let first_point = map.project(L.latLng([...coordinate_list[0]].reverse()))
            let bounds = L.bounds(first_point, first_point)
            for(let i = 1; i<coordinate_list.length; i++){
                let point = map.project([...coordinate_list[i]].reverse())
                bounds.extend(point)
            }
            map_bounds = bounds
            console.log("Bounds:", map_bounds)
        }),
    ])

    // La couche Openstreetmap standard
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map)
    
    // La couche custom de l'antenne
    L.tileLayer('./tuiles/{z}/{x}/{y}.png', {
        minZoom: 14,
        maxZoom: 23
    }).addTo(map)

    // Parametrage de la carte initiale
    map.setMaxBounds(map_bounds)
    map.setView(map_center, 19, {
        animate: false,
    })
}

const HIGHLIGHT_LAYER = Symbol("Hilight map layer")

export async function init_places(places_db){
    places = places_db

    // La couche des zones disponibles
    const area_highlight = L.geoJSON(null, {
        style: function(feature){
            return {
                className: "map-hilight-area",
                fill: false,
                stroke: false
            }
        },
        onEachFeature: function(feature, layer){
            feature[HIGHLIGHT_LAYER] = layer
        }
    }).addTo(map)

    // On ajoute toutes les zones à la carte
    for(let [feature_id, feature] of Object.entries(places.featuresById)){
        area_highlight.addData(feature)
    }
}

export function unhighlight_all(){
    for(let el of document.querySelectorAll(".map-hilight-area.active")){
        el.classList.remove("active")
    }
}

export function highlight(place_or_placeid){
    unhighlight_all()

    let place;

    if(typeof place_or_placeid == "string"){
        place = places.getFeatureById(place_or_placeid)
    } else {
        place = place_or_placeid
    }

    if(place[HIGHLIGHT_LAYER]){
        place[HIGHLIGHT_LAYER].getElement()
            .classList.add("active")
    }

    let centroid = turf.centroid(place)
    map.panTo(L.latLng(
        centroid.geometry.coordinates[1],
        centroid.geometry.coordinates[0]
    ))
}