const RADIUS = 2000.0;
const MAX_RESULTS = 20;
const INCLUDED_TYPES = ["park"];

let map: google.maps.Map;
let pos: google.maps.LatLngLiteral = {lat: 30, lng: -110};

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  map = new Map(document.getElementById("map") as HTMLElement, {
    center: pos,
    zoom: 8,
    mapId: "DEMO_MAP",
  });
}

function handle_response(places: {[index: string]: {lat: number, lng: number, display_name: string}}) {
  let place_id = document.URL.split('?')[1];
  let place = places[place_id];
  let place_location: google.maps.LatLngLiteral = { lat: place.lat, lng: place.lng};
  new google.maps.Marker({
    position: place_location,
    map,
    title: place.display_name,
  });
  map.setCenter(place_location);

  Object.keys(places).forEach(name => {
    let document_element = document.createElement("li");
    document_element.className = "element";
    let link_element = document.createElement("a");
    link_element.href = "./map.html?" + name;
    link_element.innerHTML = places[name].display_name;
    document_element.appendChild(link_element);
    // @ts-ignore
    document.getElementById("search_list").appendChild(document_element);
  });
}

initMap().then(() => {
  fetch("./locations.json").then((locations_unparsed) => {
    locations_unparsed.json().then((places) => handle_response(places));
  });
});

