<script lang="ts">
    export let uuid: string;

    import { onDestroy, onMount } from "svelte";
    import Screen from "./Screen.svelte";

    const wsUrl = new URL(`/ipmi/browser/${uuid}/ws`, window.location.href);
    wsUrl.protocol = wsUrl.protocol.replace("http", "ws");

    const dummyData = {
        x: -1,
        y: -1,
        width: 13,
        height: 5,
        blink: false,
        fg: 0,
        text: [
            "             ",
            "             ",
            " [NO SIGNAL] ",
            "             ",
            "             ",
        ],
        fg_color: [
            "0000000000000",
            "0000000000000",
            "0800000000080",
            "0000000000000",
            "0000000000000",
        ],
        bg_color: [
            "7777777777777",
            "7777777777777",
            "7777777777777",
            "7777777777777",
            "7777777777777",
        ],
        palette: [
            15790320, 15905331, 15040472, 10072818, 14605932, 8375321, 15905484,
            5000268, 10066329, 5020082, 11691749, 3368652, 8349260, 5744206,
            13388876, 1118481,
        ],
    };

    let socket: WebSocket | null = null;
    let data;

    onMount(async () => {
        socket = new WebSocket(wsUrl);

        socket.addEventListener("message", (event) => {
            data = JSON.parse(event.data);
        });
    });

    onDestroy(() => {
        console.log("onDestroy");
        if (socket !== null) {
            socket.close();
        }
    });
</script>

<Screen content={data || dummyData} />
<pre>{JSON.stringify(data, null, 2)}</pre>
