<script lang="ts">
  import Nav from '../../Nav.svelte';
  import Tabs from '../../Tabs.svelte';
  import { onMount } from 'svelte';
  import { server } from '../../../../helpers';
  const { data, params } = $props();
  let ended = $derived(data.ended);
  let status = $derived(data.status);
  import { AnsiUp } from 'ansi_up';

  let socket: WebSocket;
  let out: string[][] = $state([[], []]);
  let ansi_up = new AnsiUp();

  function websocket() {
    socket = new WebSocket(`${server}/api/job/${params.user}/${params.repo}/${params.job}/ws`);

    socket.onmessage = (event) => {
      console.log(event);
      const m = JSON.parse(event.data);
      if ('Chunk' in m) {
        console.log(m);
        out[m.Chunk.channel].push(ansi_up.ansi_to_html(m.Chunk.content));
      } else if ('Status' in m) {
        console.log(m);
        ended = m.Status.ended;
        status = m.Status.status;
      }
    };

    socket.onopen = () => {
      // socket.send('{ "State": { "stdout": 0, "stderr": 0 } }');
    };

    socket.onclose = () => {
      if (!ended) {
        out = [[], []];
        websocket();
      }
    };
  }

  onMount(() => {
    websocket();
  });
</script>

<svelte:head>
  <title>{params.user} / {params.repo}</title>
</svelte:head>

<div class="p-3">
  <Nav user={params.user} repo={params.repo} path={[]} link={true} />

  <Tabs
    login={data.login}
    user={params.user}
    repo={params.repo}
    channel={data.channel}
    active="jobs" />

  <h1 class="pt-10">Job {data.id}</h1>
  <div class="py-10">
    Started at {data.started}{#if ended}, ended at {ended} with status {status}{/if}.
  </div>

  <h2 class="mt-5">Stdout</h2>
  <div class="p-5">
    <div class="w-full whitespace-pre-wrap font-mono text-sm">
      {#each out[0] as m}{@html m}{/each}
    </div>
    {#if !out[0].length}
      <p>No stdout so far</p>
    {/if}
  </div>
  <h2 class="mt-10">Stderr</h2>
  <div class="p-5">
    <div class="w-full whitespace-pre-wrap font-mono text-sm">
      {#each out[1] as m}{@html m}{/each}
    </div>
    {#if !out[1].length}
      <p>No stderr so far</p>
    {/if}
  </div>
</div>