var busColor = "#fc5c65";
var walkColor = "#2bcbba";
var otherColor = "#778ca3";
var railColor = "#3867d6";
var undergroundColor = "#a55eea";
var carColor = "#45aaf2";

function getTransportMode() {
  return document.querySelector('input[name="transportMode"]:checked').value;
}

function loadData(start, end, pairName) {
  var rangeEnabled = document.querySelector('#rangeCheckbox').checked;
  var rangeValue = document.querySelector('#rangeValue').value;
  pairName || (pairName = "not_set");
  map.getLayer(pairName) && map.removeLayer(pairName);
  var requestData = JSON.stringify({
    locations: [
      {
        id: "Start",
        coords: start
      },
      {
        id: "End",
        coords: end
      }
    ],
    departure_searches: [
      {
        id: "departure search example",
        departure_location_id: "Start",
        arrival_location_ids: ["End"],
        transportation: {
          type: getTransportMode()
        },
        departure_time: new Date().toISOString(),
        properties: ["travel_time", "distance", "route"],
        range: {
          enabled: rangeEnabled,
          max_results: 1,
          width: parseInt(rangeValue)
        }
      }
    ]
  });
  var xhr = new XMLHttpRequest();
  xhr.addEventListener("readystatechange", function() {
    if (this.readyState === 4) {
      parseAndLoadLines(JSON.parse(this.response), pairName);
    }
  });
  xhr.open("POST", "https://api.traveltimeapp.com/v4/routes");
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.setRequestHeader("Accept", "application/json");
  xhr.setRequestHeader("X-Application-Id", "APP ID HERE");
  xhr.setRequestHeader("X-Api-Key", "API KEY HERE");
  xhr.send(requestData);
}
var map = new mapboxgl.Map({
  container: "map",
  style: {
'version': 8,
'sources': {
'raster-tiles': {
'type': 'raster',
'tiles': [
'https://tiles.traveltime.com/lux/{z}/{x}/{y}.png?key=APP ID HERE'
],
'tileSize': 256,
'attribution':
'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
}
},
'layers': [
{
'id': 'simple-tiles',
'type': 'raster',
'source': 'raster-tiles',
'minzoom': 0,
'maxzoom': 22
}
]
},
  center: [13.352798436541264, 52.51307448201544],
  zoom: 15,
  attributionControl: false
});

map.on("load", function() {
  refreshLines();
});

for (let index = 0; index < 10; index++) {
  map.on("click", "pair_" + index, function(e) {
    var marker = addMarker(e.lngLat.lng, e.lngLat.lat);
    var name = "pair_" + index;
    var aMarker = pairs[index][0];
    var bMarker = pairs[index][1];
    pairs.splice(index + 1, 0, [marker, aMarker]);
    pairs[index] = [bMarker, marker];
    refreshLines();
  });
}

function addMarker(lng, lat) {
  var marker = new mapboxgl.Marker({
    draggable: true
  })
    .setLngLat([lng, lat])
    .addTo(map);
  marker.on("dragend", e => refreshLines());
  return marker;
}

var markers = [
  addMarker(13.339723415070296, 52.515636259501576),
  addMarker(13.36456681231744, 52.51768082692038)
];
var pairs = [[markers[0], markers[1]]];

function refreshLines() {
  for (var pairI in pairs) {
    loadData(
      pairs[pairI][0].getLngLat(),
      pairs[pairI][1].getLngLat(),
      "pair_" + pairI
    );
  }
}

function parseAndLoadLines(response, pairName) {
  var parsed = apiResponseToLineStrings(response);
  loadLines(parsed, pairName);
}

function apiResponseToLineStrings(response) {
  var location = response.results[0].locations[0];
  if (!location) {
    var mode = getTransportMode();
    alert(`No route available for transport mode: '${mode}'`);
  }
  var id = location.id;
  var properties = location.properties[0];
  var travelTime = properties.travel_time;
  var route = properties.route;
  var lineStrings = route.parts.map(part => {
    var coords = part.coords;
    var coordsAsArrays = coords.map(coord => {
      return [coord.lng, coord.lat];
    });
    var mode = part.mode;
    return {
      type: "Feature",
      properties: {
        color: modeToColor(mode),
        mode: mode
      },
      geometry: {
        type: "LineString",
        coordinates: coordsAsArrays
      }
    };
  });
  return {
    type: "FeatureCollection",
    features: lineStrings
  };
}

function loadLines(parsed, pairName) {
  map.getSource(pairName) && map.removeSource(pairName);
  map.addSource(pairName, {
    type: "geojson",
    data: parsed
  });
  map.addLayer({
    id: pairName,
    type: "line",
    source: pairName,
    layout: {
      "line-join": "round",
      "line-cap": "round"
    },
    paint: {
      "line-color": ["get", "color"],
      "line-width": 9
    }
  });
  map.on("mouseenter", "LineString", function() {
    map.getCanvas().style.cursor = "pointer";
  });
  map.on("mouseleave", "LineString", function() {
    map.getCanvas().style.cursor = "";
  });
}

function modeToColor(mode) {
  switch (mode) {
    case "walk":
      return walkColor;
    case "bus":
    case "coach":
      return busColor;
    case "rail_overground":
    case "train":
    case "rail_national":
    case "rail_dlr":
      return railColor;
    case "rail_underground":
      return undergroundColor;
    case "car":
    case "parking":
      return carColor;
    default:
      return otherColor;
  }
}