import leaflet from "https://esm.sh/leaflet@1.9.4";
import * as chartjs from "https://esm.sh/chart.js@4.4.7";



const london = [51.505, -0.09];
const centerOfTheWorld = london;

function findBaryCenter(points){
  let lat = 0;
  let lon = 0;
  for (const point of points){
    lat += point[0];
    lon += point[1];    
  }
  return [lat / points.length, lon / points.length]
}

function getCenter(data) {
  if (!data) {
    return centerOfTheWorld;
  }  
  // good enough estimation
  return findBaryCenter(data.map(road => findBaryCenter(road.points)));
}

function addRoad(road, map) {
  leaflet.polyline(road.points).addTo(map);
}

function addRoads(roads, map) {
  for (const road of roads) {
    addRoad(road, map);
  }
}

function getActiveCity(){
  const elm = document.getElementById("leaflet-map");
  return elm.getAttribute('data-city');
  
}

function getUrl(city){
   const params = {city: city}
  return `/api/roads?${new URLSearchParams(params).toString()}`
}




async function renderLeafletMap(city){
  const resp = await fetch(getUrl(city));
  const roads = await resp.json();

  const map = leaflet.map("leaflet-map").setView(getCenter(roads), 13);

  leaflet
  .tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19 })
  .addTo(map);
  addRoads(roads, map);
}



const activeCity = getActiveCity();
await Promise.all([renderLeafletMap(activeCity)])