<script lang="ts">
    import type { Wall } from "$lib/games/games";
    import type { VisitedQuestions } from "./Types";

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

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

    let { wall, onclick, visited }: Props = $props();
</script>

{#if wall != undefined}
    <div class="grid h-full grow grid-flow-col grid-cols-5 grid-rows-6 gap-4 pb-4">
        {#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}</div>
                </div>
            {/each}
        {/each}
    </div>
{:else}
    <p>Wall is undefined</p>
{/if}

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