import './style.css'

async function main(){
    const {Map} = await google.maps.importLibrary("maps");
    const map = new Map(document.getElementById("map"),{
        center: {lat: 42.10125081757972, lng:-75.94181323552698},
        zoom: 14
    });
    const UI = document.createElement("div");
    UI.id = "UI";
    
    const from_lattitude_input = document.createElement("input");
    from_lattitude_input.placeholder = "42.10125081757972";
    from_lattitude_input.type = "number";
    from_lattitude_input.id = "from_lattitude_input";
    UI.appendChild(from_lattitude_input);

    const from_longitude_input = document.createElement("input");
    from_longitude_input.type = "number";
    from_longitude_input.placeholder = "-75.94181323552698";
    from_longitude_input.id = "from_longitude_input";
    UI.appendChild(from_longitude_input);

    const from_pos_button = document.createElement("button");
    from_pos_button.id = "from_pos_button";
    from_pos_button.innerText = "Set Start Position";
    let from_pos_toggle = false;
    UI.appendChild(from_pos_button);
    from_pos_button.addEventListener("click",e=>{
        from_pos_toggle = !from_pos_toggle;
        to_pos_toggle = false;
    });

    const to_lattitude_input = document.createElement("input");
    to_lattitude_input.placeholder = "42.10125081757972";
    to_lattitude_input.type = "number";
    UI.appendChild(to_lattitude_input);

    const to_longitude_input = document.createElement("input");
    to_longitude_input.type = "number";
    to_longitude_input.placeholder = "-75.94181323552698";
    UI.appendChild(to_longitude_input);

    const to_pos_button = document.createElement("button");
    to_pos_button.id = "to_pos_button"
    to_pos_button.innerText = "Set End Position"
    let to_pos_toggle = false;
    to_pos_button.addEventListener("click",e=>{
        to_pos_toggle = !to_pos_toggle;
        from_pos_toggle = false;
    });
    UI.appendChild(to_pos_button);

    const sub_button = document.createElement("button");
    sub_button.addEventListener("click",submit_func(map));
    sub_button.id = "sub_button";
    sub_button.innerText = "Submit";
    UI.appendChild(sub_button);

    map.addListener("click", e=>{
        const {lat, lng} = e.latLng;
        if(from_pos_toggle){
            from_lattitude_input.value = lat();
            from_longitude_input.value = lng();
        }
        if(to_pos_toggle){
            to_lattitude_input.value = lat();
            to_longitude_input.value = lng();
        }
    });
    document.body.appendChild(UI)
    const time = new Date().toISOString();

}
function submit_func(map){
//TODO: grab the path and show the poly lines and the bus route name
async function submit(clickEvent){
   let from_lat = document.getElementById("from_lattitude_input"); 
   let from_lon = document.getElementById("from_longitude_input"); 
}
return submit;
}

main();