hideLoading()

async function findByOrigDest() {
    showLoading()
    const formData = await fetchOrigDest()
    log(`findByOrigDest: Searching for PIS Code for ${JSON.stringify(formData)}`)
    const endpoint = `pis/${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 class="code">Code</th>
        <th class="stops">Stations</th>
        </tr>`
    div.insertAdjacentHTML("beforeend", tableHtml)
    const data = JSON.parse(json)
    let results = 0
    for(var i = 0; i < data.length; i++) {  // Break into separate function.  Need to
                                            // iterate over stops and print them in the
                                            // format: `AVN, PRI, SHH... etc.`
        tableData += `<tr><td class="code">${data[i][code]}</td>
            <td class="stops">${data[i][stops]}</td></tr>`
        results++
    }
    tableData += "</table>"
    document.getElementById('result-table').insertAdjacentHTML("beforeend", tableData)
    document.getElementById('result-count').textContent = results
}

async function noData() {
    msg = '<p>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('crs-box').style = 'display:block'
}