import * as MAP from "./map.js"
import { PlaceDatabase } from "./places.js";

/** La carte */

/** La base de données de lieux @type {PlaceDatabase|null} */
let places = null

// CHARGEMENT
await Promise.all([
    // Base de données des zones
    PlaceDatabase.createDefault().then(db => places = db),
    MAP.init()
]);

// Un petit point de debug
window.interhackPlaces = places;

await MAP.init_places(places)

// GESTION de la recherche
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())

window.addEventListener("hashchange", () => {
    let place_id = decodeURIComponent(location.hash.substring(1))
    if(place_id){
        MAP.highlight(place_id)
    } else {
        MAP.unhighlight_all()
    }
})

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"))

            for(let result_item of search_results){
                let el = document.createElement("li")
                let a = document.createElement("a")
                el.append(a)
                a.href = "#"+encodeURIComponent(result_item.ref)
                a.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([])
        }

    }
})