var map;
const form = document.querySelector('#path-form')
const markerIsStart = document.querySelector("#marker-point-start")
const markerIsEnd = document.querySelector("#marker-point-end")

google.maps.event.addDomListener(window, 'load', initialize);
form.addEventListener('submit', postShortestPath, false)


function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(58.40384776751319, 15.578484535217285),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapCanvas = document.getElementById("map_canvas")
    map = new google.maps.Map(mapCanvas, mapOptions);
    google.maps.event.addListener(map, 'click', handleMapClick)
}

async function postShortestPath(event){
    event.preventDefault()
    var lat1 = parseFloat(document.querySelector('#lat1').value)
    var lng1 = parseFloat(document.querySelector('#lng1').value)
    var lat2 = parseFloat(document.querySelector('#lat2').value)
    var lng2 = parseFloat(document.querySelector('#lng2').value)

    // Check that they're not Nan (stops function if one is Nan)
    if(!lat1 || !lng1  || !lat2 || !lng2)
        return alert('Formatting Error: Coordinates are not float values.')
    
    req = {lat1, lng1, lat2, lng2} // Dictionary auto-keys

    res = await fetch('/shortest-path', {
        method:'POST',
        credentials: 'same-origin',
        body: JSON.stringify(req)
    })

    res = await res.json() 
    var points = new google.maps.MVCArray()
    console.log(res.path)
    res.path.map(coord=>{
        var [lat, lng] = coord
        var point = new google.maps.LatLng(lat, lng)
        points.push(point)
    })

    createPolyline(points)
}

function createPolyline(points){
    var polyline = new google.maps.Polyline({
        path: points,
        map: map
    });
}

function handleMapClick ({latLng}){
    createMarker(latLng, `Click: ${latLng}`)
    console.log(latLng)
    var {lat, lng} = latLng 
    var posNumber = markerIsStart.checked ? '1' : '2'
    document.querySelector('#lat' + posNumber).value = lat()
    document.querySelector('#lng' + posNumber).value = lng()
    if(markerIsStart.checked)
        markerIsEnd.checked = true 
    

}


function createMarker (position, title){
    return new google.maps.Marker({
        map,
        position,
        title
    })
}