hideLoading()

async function findByOrigDest() {
    showLoading()
    const formData = await fetchOrigDest()
    log(`findByOrigDest: Searching for PIS Code for ${JSON.stringify(formData)}`)
    const endpoint = `pis/origdest/${formData.origin}/${formData.destination}`
    const json = await getApi(endpoint)
    if (json == false) {
        await noData()
    } else {
        await insertData(json)
    }
    document.getElementById('crs-box').style = 'display:none'
    document.getElementById('result-box').style = 'display:block'
    hideLoading()
}

async function fetchOrigDest() {
    var orig = document.getElementById("origin").value
    var dest = document.getElementById("destination").value
    return {origin: orig, destination: dest}
}

async function insertData(json) {
    // Receives the JSON Respose ([{},{}]) containing one or more possible
    // PIS codes.  Display the code and the stops with a method of scrolling between them.
    // Maybe as a table or a carousel?
    const div = document.getElementById('result-box')
    let tableData = `<table id="result-table">
        <tr>
        <th>Code</th>
        <th>Stations</th>
        </tr>`
    let results = 0
    for(var i = 0; i < json.length; i++) {  // Hopefully can style output with CSS
        tableData += `<tr><td class="pis-code">${json[i]['code']}</td>
            <td class="station">${json[i]['stops'].join(', ')}</td></tr>`
        results++
    }
    tableData += "</table>"
    div.insertAdjacentHTML("beforeend", tableData)
    if (results > 1) {
        document.getElementById('result-count').textContent = results.toString()
    }
}

async function noData() {
    const msg = '<p id="result-table">No results found</p>'
    document.getElementById('result-box').insertAdjacentHTML("beforeend", msg)
}

async function reset() {
    document.getElementById('origin').value = ""
    document.getElementById('destination').value = ""
    document.getElementById('result-box').style = 'display:none'
    document.getElementById('result-table').remove()
    document.getElementById('crs-box').style = 'display:block'
}