<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 | undefined = undefined;
  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) => {
      const m = JSON.parse(event.data);
      if (typeof m == 'object') {
        if (m?.Chunk) {
          console.log(m);
          out[m.Chunk.channel].push(ansi_up.ansi_to_html(m.Chunk.content));
          if (m.Chunk.channel == 0 && out[1].reduce((a, b) => a + b.length, 0)) {
            document.getElementById('stdout-bottom')?.scrollIntoView();
          } else {
            document.getElementById('stderr-bottom')?.scrollIntoView();
          }
        } else if (m?.Status) {
          console.log(m);
          ended = m.Status.ended;
          status = m.Status.status;
        }
      }
    };

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

  onMount(() => {
    setInterval(() => {
      if (!socket) websocket();
    }, 1000);
  });
</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 id="stdout-bottom"></div>
  </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 id="stderr-bottom"></div>
  </div>
</div>