<script lang="ts">
    import axios from "axios";
    import {
        isWall,
        type Category,
        type CategoryId,
        type QuestionId,
        type VisitedQuestions,
        type Wall
    } from "./Types";
    import { url } from "./util";
    import { onMount } from "svelte";
    import type { FullWall } from "./games/games";

    interface Props {
        wall: Wall | FullWall | undefined;
        onclick?: (catIndex: number, questionIndex: number) => unknown;
        onclickIds?: (catId: CategoryId, questionId: QuestionId) => unknown;
        visited: VisitedQuestions;
        [key: string]: unknown;
    }

    function isVisited(catIndex: number, queIndex: number): boolean {
        return visited[catIndex] && visited[catIndex].includes(queIndex);
    }

    let { wall, onclick, onclickIds, visited }: Props = $props();

    let categories: Category[] = $state([]);

    async function fetchCategories(wall: Wall) {
        let cats: Promise<Category>[] = [];
        for (const catId of wall.categories) {
            cats.push(
                axios
                    .get(url(`/category?id=${catId}`), { withCredentials: true })
                    .then((response) => {
                        if (response.status === 200) {
                            return response.data;
                        } else throw "Failed to fetch: " + response.status;
                    })
            );
        }
        return Promise.all(cats).then((cats) => {
            categories = cats;
        });
    }

    onMount(() => {
        if (wall && isWall(wall)) fetchCategories(wall);
    });
</script>

{#if wall != undefined}
    <div class="grid h-full grow grid-flow-col grid-cols-5 grid-rows-6 gap-4 pb-4">
        {#if isWall(wall)}
            {#each categories as category, catIndex}
                <div class="flex items-center justify-center text-3xl font-semibold">
                    <div>{category.name}</div>
                </div>
                {#each category.questions as question, queIndex}
                    <!-- svelte-ignore a11y_click_events_have_key_events -->
                    <div
                        class="card {isVisited(catIndex, queIndex) ? 'visited' : ''}"
                        role="button"
                        aria-pressed="false"
                        tabindex="0"
                        onclick={() => {
                            if (onclickIds) onclickIds(category._id, question._id);
                        }}
                    >
                        <div class="text-6xl font-thin">
                            {question.points >= 0 ? question.points : "???"}
                        </div>
                    </div>
                {/each}
            {/each}
        {:else}
            {#each wall.categories as category, catIndex}
                <div class="flex items-center justify-center text-3xl font-semibold">
                    <div>{category.name}</div>
                </div>
                {#each category.questions as question, queIndex}
                    <!-- svelte-ignore a11y_click_events_have_key_events -->
                    <div
                        class="card {isVisited(catIndex, queIndex) ? 'visited' : ''}"
                        role="button"
                        aria-pressed="false"
                        tabindex="0"
                        onclick={() => {
                            if (onclick) onclick(catIndex, queIndex);
                        }}
                    >
                        <div class="text-6xl font-thin">
                            {question.points >= 0 ? question.points : "???"}
                        </div>
                    </div>
                {/each}
            {/each}
        {/if}
    </div>
{:else}
    <p>Wall is undefined</p>
{/if}

<style>
    .visited {
        background-color: gray;
    }
</style>
