versionDisplay()

let data // Maybe this is a bad idea?

init()

async function init() {
  const headcode = await getQuery('headcode')
  if (headcode == 'false') {
    parse([]) // Pass an empty array to parse()
  }
  const res = await get(headcode)
  parse(res)
}

async function get(headcode) {
  const apiPath = `train/headcode/today/${headcode}`
  data = await getApi(apiPath, auth = true)
  if (typeof data == 'number' || !data) {
    log('train-detail.get: Status: ' + data, 'ERR')
    return []
  }
  log(data, 'DBUG')
  return data
}

async function parse(data) {
  if (data.length >= 1) {
    document.getElementById('train_options').style = 'display:none;'
    displayOne(data[0])
  }
  displayOptions(data)
  document.getElementById('train_data').style = 'display:block;'
}

async function displayOptions(data) {
  for (service in data) {
    if (data[service]) {
      const serviceData = data[service]
      const lastStop = serviceData?.stops[(serviceData['stops'].length - 1)]
      log(`displayOptions: data[${service}] = ${serviceData}`, 'dbug')
      let button = `
      <button class='service_button' onclick='displayOne(data[${service}])'>
        <span class='service_toc'>${serviceData?.operator || 'GW'}</span>
        <span class='service_origin_time'>${serviceData?.stops[0]['wttDeparture']}</span>
        <span class='service_origin_tiploc'>${serviceData?.stops[0]['tiploc']}</span>
        to 
        <span class='service_dest_tiploc'>${lastStop?.tiploc}</span>
      </button>
    `
      document.getElementById('train_options').insertAdjacentHTML('beforeend', button)
    }
    document.getElementById('train_options').style = 'display:block;'
    return data
  }
}

async function displayOne(object) {
  // Display a single service
  const dataTableHead = `
    <p id='data_headcode'>${object['headcode']}</p>
    <p id='data_piscode'>PIS Code: ${object['pis']}</p>
    <table id='data_table'>
    <tr>
      <th>Location</th>
      <th>Arr.</th>
      <th>Dep.</th>
    </tr>
    `
  const dataTableClose = `
    </table>`
  let publicStops = []
  for (const stop of object['stops']) {
    if (stop['isPublic']) {
      publicStops.push(stop)
    }
  }
  console.log(publicStops)
  stopRows = ''
  for (const stop of publicStops) {
    stopRows += await createPublicStopTableRow(stop)
  }
  // If there are no public stops, show non-public locations
  if (!publicStops.length) {
    for (const stop of object['stops']) {
      stopRows += await createPublicStopTableRow(stop, 'wtt')
    }
  }
  const displayBox = document.getElementById('train_data')
  displayBox.innerHTML = ''
  displayBox.insertAdjacentHTML('beforeend', dataTableHead + stopRows + dataTableClose)
  displayBox.style = 'display:block;'
}

async function createPublicStopTableRow(stop, type='public') {
  let arr, dep
  let data_tiploc = stop['tiploc']
  if (type === 'wtt') {
    arr = stop['wttArrival'], dep = stop['wttDeparture']
  }
  if (type === 'public') {
    arr = stop['publicArrival'], dep = stop['publicDeparture']
  }
  if (typeof data_tiploc === 'undefined') {
    data_tiploc = ''
  }
  if (typeof arr === 'undefined') {
    arr = '-'
  }
  if (typeof dep === 'undefined') {
    dep = '-'
  }
  return `
      <tr>
        <td id='data_tiploc'>${data_tiploc}</td>
        <td id='public_arr'>${arr}</td>
        <td id='public_dep'>${dep}</td>
      </tr>
    `
}