import leaflet from "https://esm.sh/leaflet@1.9.4";

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 getActiveDate() {
  const elm = document.getElementById("leaflet-map");
  return elm.getAttribute('data-date') ?? "";
}

function getUrl(city, date) {
  const params = {city: city}
  if (date.trim() !== "") {
    params.date = date;
  }
  return `/api/roads?${new URLSearchParams(params).toString()}`
}

async function renderLeafletMap(city, date) {
  const resp = await fetch(getUrl(city, date));
  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();
const activeDate = getActiveDate();
await Promise.all([renderLeafletMap(activeCity, activeDate)])