<script lang="ts">
    import DisplayStateSvelte from "$lib/DisplayState.svelte";
    import { page } from "$app/state";
    import { error } from "@sveltejs/kit";
    import SimpleQuestionComponent from "$lib/SimpleQuestionComponent.svelte";
    import {
        isAudioMultipleChoiceQuestion,
        isAudioQuestion,
        isImageMultipleChoiceQuestion,
        isImageQuestion,
        isMultipleChoiceQuestion,
        isSimpleQuestion
    } from "$lib/games/games";
    import ws from "$lib/websocket.svelte";
    import { MessageType } from "$lib/MessageType";
    import { untrack } from "svelte";
    import MultipleChoiceQuestionComponent from "$lib/MultipleChoiceQuestionComponent.svelte";
    import ImageQuestionComponent from "$lib/ImageQuestionComponent.svelte";
    import AudioQuestionComponent from "$lib/AudioQuestionComponent.svelte";
    import AudioMultipleChoiceQuestionComponent from "$lib/AudioMultipleChoiceQuestionComponent.svelte";
    import ImageMultipleChoiceQuestionComponent from "$lib/ImageMultipleChoiceQuestionComponent.svelte";

    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);
        }
    }
    if (page.params.category === undefined) {
        error(404);
    }
    const categoryIndex = parseInt(page.params.category);
    if (isNaN(categoryIndex)) {
        error(404);
    }

    const category = DisplayStateSvelte.wall?.categories[categoryIndex];

    if (category === undefined) {
        error(404);
    }

    if (page.params.question === undefined) {
        error(404);
    }
    const questionIndex = parseInt(page.params.question);
    if (isNaN(questionIndex)) {
        error(404);
    }

    const question = category.questions[questionIndex];

    console.log(question);

    if (question === undefined) {
        error(404);
    }

    let showAnswer = $state(false);
    let showQuestion = $state(false);
    let isBuzzed = $state(false);

    $effect(() => {
        if (ws.messageNum <= 0) return;
        console.log(ws.message);
        try {
            let json = JSON.parse(ws.message);
            if (json.type == MessageType.SHOW_ANSWER) {
                ws.nextMessage();
                untrack(() => {
                    showQuestion = true;
                    showAnswer = true;
                });
            }
            if (json.type == MessageType.HIDE_ANSWER) {
                ws.nextMessage();
                untrack(() => {
                    showAnswer = false;
                });
            }
            if (json.type == MessageType.SHOW_QUESTION) {
                ws.nextMessage();
                untrack(() => {
                    showQuestion = true;
                });
            }
            if (json.type == MessageType.HIDE_QUESTION) {
                ws.nextMessage();
                untrack(() => {
                    showQuestion = false;
                    showAnswer = false;
                });
            }
            if (json.type == MessageType.BUZZER_PRESSED) {
                ws.nextMessage();
                untrack(() => {
                    isBuzzed = true;
                });
            }
            if (json.type == MessageType.BUZZER_RELEASED) {
                ws.nextMessage();
                untrack(() => {
                    isBuzzed = false;
                });
            }
        } catch (e) {}
    });
</script>

<div class="mt-4 flex grow flex-col">
    <div class="mb-4 flex justify-between text-4xl">
        <div>{category.name}</div>
        <div>
            {question.points} Punkte
        </div>
    </div>
    <div class="flex grow flex-col">
        {#if question === undefined}
            <p>Question is undefined</p>
        {:else if isSimpleQuestion(question)}
            <SimpleQuestionComponent {question} {showAnswer} {showQuestion} />
        {:else if isMultipleChoiceQuestion(question)}
            <MultipleChoiceQuestionComponent {question} {showAnswer} {showQuestion} />
        {:else if isImageQuestion(question)}
            <ImageQuestionComponent {question} {showAnswer} {showQuestion} {isBuzzed} />
        {:else if isImageMultipleChoiceQuestion(question)}
            <ImageMultipleChoiceQuestionComponent
                {question}
                {showAnswer}
                {showQuestion}
                {isBuzzed}
            />
        {:else if isAudioQuestion(question)}
            <AudioQuestionComponent {question} {showAnswer} {showQuestion} showPlayer={false} />
        {:else if isAudioMultipleChoiceQuestion(question)}
            <AudioMultipleChoiceQuestionComponent
                {question}
                {showAnswer}
                {showQuestion}
                showPlayer={false}
            />
        {:else}
            <p>Type of question unknown</p>
        {/if}
    </div>
</div>
