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

/** La carte */
const map = L.map(document.getElementById("map"), {
    attributionControl: false,
    zoomControl: false
})

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

/** La base de données de lieux @type {PlaceDatabase|null} */
let places = null
/** Le centre de la carte */
let map_center = null
/** Les bords de la carte */
let map_bounds = null

// CHARGEMENT
await Promise.all([
    PlaceDatabase.createDefault().then(db => places = db),
    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)
    }),
    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)
    }),
]);
// CHARGEMENT FINI

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)

L.tileLayer('./tuiles/{z}/{x}/{y}.png', {
    minZoom: 14,
    maxZoom: 23
}).addTo(map)

const geojson_layer = L.geoJSON(null, {
    //TODO
}).addTo(map)

for(let [feature_id, feature] of Object.entries(places.featuresById)){
    geojson_layer.addData(feature)
}

map.setMaxBounds(map_bounds)
map.setView(map_center, 19, {
    animate: false,
})

const search_form = document.getElementById("search-area")
search_form.elements["query"].addEventListener("change", () => search_form.requestSubmit())
search_form.elements["query"].addEventListener("input", () => search_form.requestSubmit())

search_form.addEventListener("submit", e => {
    e.preventDefault()
    if(places){
        let data = new FormData(search_form)
        
        if(data.get("query")){
            let resultElements = []

            let search_results = places.search(data.get("query"))
            console.log("Search results:", search_results)

            for(let result_item of search_results){
                let el = document.createElement("li")
                el.textContent = result_item.feature.properties.name+" ("+result_item.ref+")"
                resultElements.push(el)
            }

            if(resultElements.length > 0){
                document.getElementById("search-result").replaceChildren(...resultElements)
            } else {
                document.getElementById("search-result").replaceChildren(document.createTextNode("Pas de resultat"))
            }
        } else {
            document.getElementById("search-result").replaceChildren([])
        }

    }
})