<script lang="ts">
    import Wall from "$lib/Wall.svelte";
    import DisplayStateSvelte from "$lib/DisplayState.svelte";
    import { page } from "$app/state";
    import { error } from "@sveltejs/kit";
    import ws from "$lib/websocket.svelte";
    import { MessageType } from "$lib/MessageType";
    import type { VisitedQuestions } from "$lib/Types";
    import { onMount } from "svelte";
    import { fetchWall } from "../../../../../editor/fetchers";

    console.log("wall:", page.params.wall);

    let visited: VisitedQuestions = $state([]);

    $effect(() => {
        if (ws.messageNum <= 0) return;
        console.log(ws.message);
        try {
            let json = JSON.parse(ws.message);
            if (json.type == MessageType.VISITED_QUESTIONS) {
                ws.nextMessage();
                visited = json.visitedQuestions;
            }
        } catch (e) {}
    });

    onMount(() => {
        fetchWall(`${page.params.wall}`).then((wall) => {
            DisplayStateSvelte.wall = wall;
        });
    });
</script>

<Wall wall={DisplayStateSvelte.wall} {visited} />
