<script lang="ts">
    import Wall from "./Wall.svelte";
    import type { Player } from "./Player";
    import { GameState } from "./GameState";
    import type { Game } from "$lib/games/games";
    import ws from "$lib/websocket.svelte";
    import { page } from "$app/state";

    let startDisabled = $state(true);
    let _startDisabled = true;

    $effect(() => {
        if (!ws.message) return;
        console.log(ws.message);
        if (ws.nextMessage() == "DISPLAY-CONNECTED") {
            if (!_startDisabled) {
                gameManager?.sendStart();
                gameManager?.sendCurrentState();
            }
            _startDisabled = false;
            startDisabled = false;
        }
    });

    class GameManager {
        public state: GameState = $state(GameState.INIT);
        public game: Game;
        public players: Player[];

        public currentWall = $state(0);

        constructor(game: Game, players: Player[]) {
            this.game = game;
            this.players = players;
        }

        startGame(): void {
            this.state = GameState.CHOOSING_QUESTION;
            this.sendStart();
            this.sendCurrentState();
        }

        sendStart(): void {
            ws.sendMessage({
                type: "start"
            });
        }

        sendCurrentState(): void {
            ws.sendMessage({
                type: "players",
                players
            });
            ws.sendMessage({
                type: "goto",
                route: `/${page.params.game}/${this.currentWall}`
            });
        }
    }

    let { data } = $props();
    let players: Player[] = $state([
        {
            name: "Player 1",
            points: 0
        },
        {
            name: "Player 2",
            points: 0
        },
        {
            name: "Player 3",
            points: 0
        }
    ]);
    let gameManager = new GameManager(data, players);

    function addPlayer() {
        players.push({
            name: "Player " + (players.length + 1),
            points: 0
        });
    }

    function removePlayer(index: number) {
        players.splice(index, 1);
    }
</script>

<div class="flex h-full flex-col">
    <h1 class="ms-4 text-7xl font-bold">{gameManager.game.name}</h1>
    {#if gameManager.state === GameState.INIT}
        <div class="p-4">
            <div class="flex items-center">
                <h2 class="grow pb-4 text-5xl">Spieler</h2>
                <button class="btn" disabled={startDisabled} onclick={() => gameManager.startGame()}
                    >Start</button
                >
            </div>
            <div class="flex flex-col space-y-2 pb-4">
                {#each gameManager.players as player, i}
                    <div class="flex items-center">
                        <input class="inputField grow" type="text" bind:value={player.name} />
                        <button class="btn" onclick={() => removePlayer(i)}>Löschen</button>
                    </div>
                {/each}
            </div>
            <button class="btn" onclick={addPlayer}>Spieler hinzufügen</button>
        </div>
    {:else}
        <Wall wall={gameManager.game.walls[gameManager.currentWall]} />
    {/if}
</div>
