<script>
    export let station = "";
    export let title = "Loading...";
    import { onMount } from 'svelte'
    import Loading from '$lib/navigation/loading.svelte';
	  import Nav from '$lib/navigation/nav.svelte';
    import { uuid } from '$lib/stores/uuid';
  
    let requestedStation;
    $: requestedStation = station;
  
    let jsonData = {};
    let services = [];
    let dataAge = null;
    let isLoading = true;
  
    $: {
      if (jsonData?.GetBoardResult?.generatedAt) {
        dataAge = new Date(jsonData.GetBoardResult.generatedAt);
      }
  
      if (jsonData?.GetBoardResult?.trainServices?.service) {
        services = jsonData.GetBoardResult.trainServices.service;
      } else {
        services = [];
      }

      if (jsonData?.GetBoardResult?.locationName) {
        title = jsonData.GetBoardResult.locationName
      } else {
        title = "Loading Board"
      }
    }
  
    async function fetchData() {
      isLoading = true; // Set loading state
      try {
        console.log(`Requested Station: ${requestedStation}`);
        const url = `https://owlboard.info/api/v2/live/station/${requestedStation}/staff`;
        const opt = {
            method: "GET",
            headers: {
                "uuid": $uuid
            }
        }
        const data = await fetch(url, opt);
        jsonData = await data.json();
      } catch (error) {
        console.error("Error fetching data:", error);
      } finally {
        isLoading = false; // Clear loading state
      }
    }
  
    function parseTime(string = ""){
      let output
      let change
      switch (string) {
      case 'Delayed':
        output = 'LATE'
        change = "changed"
        break
      case 'Cancelled':
        output = 'CANC'
        change = "cancelled"
        break
      case 'On time':
        output = 'RT'
        change = ""
        break
      case '':
        output = '-'
        change = ""
        break
      case undefined:
        output = '-'
        change = ""
        break
      case 'No report':
        output = '-'
        change = ""
        break
      case 'undefined':
        output = false
        change = ""
        break
      default:
        output = string
        change = "changed"
      }
      return {data: output, changed: change}
    }
  
    onMount(() => {
      fetchData();
    });
  </script>
  <p>Staff Boards not yet implemented</p>
  {#if isLoading}
    <Loading />
  {:else}
    
    <p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
    <p>Staff LDB for {station}</p>

    {#each services as service}
      <div class="service">
        <p class="service-operator">{service.operatorCode}</p>
        <p class="service-headcode">{service.trainid}</p>
        <p class="service-origin">{service.origin.location.tiploc}</p>
        <p class="service-dest">{service.destination.location.tiploc}</p>
        <p class="service-plat">{service.platform}</p>
        <p class="service-expArr">{new Date(service.sta).toLocaleTimeString() || '-'}</p>
      </div>
    {/each}
  {/if}  

 <Nav />