<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";

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

    let paramWall = page.params.wall;
    if (paramWall === undefined) {
        error(404);
    }
    const wallIndex = parseInt(paramWall);
    if (isNaN(wallIndex)) {
        error(404);
    }
    if (DisplayStateSvelte.wallIndex !== wallIndex) {
        const wall = DisplayStateSvelte.game?.walls[wallIndex];
        if (wall) {
            DisplayStateSvelte.wall = wall;
            DisplayStateSvelte.gameIndex = wallIndex;
        } else {
            error(404);
        }
    }

    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) {}
    });
</script>

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