<script lang="ts">
    import { goto } from "$app/navigation";
    import { page } from "$app/state";
    import Modal from "$lib/Modal.svelte";
    import Textfield from "$lib/Textfield.svelte";
    import type { Game, Wall as WallType } from "$lib/Types";
    import { url } from "$lib/util";
    import Wall from "$lib/Wall.svelte";
    import axios from "axios";
    import { onMount } from "svelte";

    let game: Game | undefined = $state();

    let walls: WallType[] = $state([]);
    let selectedWall: WallType | undefined = $state();

    let showNewWall = $state(false);
    let newWallName = $state("");

    let showDeleteWall = $state(false);
    let wallToDelete: WallType | undefined = $state();

    let error = $state("");

    function fetchGame() {
        return axios
            .get(url(`/game?id=${page.params.gameid}`), { withCredentials: true })
            .then((response) => {
                if (response.status === 200) {
                    game = response.data;
                } else {
                    console.error(`Failed to fetch game: ${response.status}`);
                }
            })
            .catch((err) => console.error(err));
    }

    function fetchWalls() {
        return axios
            .get(url(`/walls/${page.params.gameid}`), { withCredentials: true })
            .then((response) => {
                if (response.status === 200) {
                    walls = response.data;
                    if (selectedWall === undefined && walls.length > 0) selectedWall = walls[0];
                }
            })
            .catch((err) => {
                console.error(err);
            });
    }

    async function addNewWall() {
        if (!newWallName) return false;
        return axios
            .post(
                url(`/wall`),
                {
                    gameid: page.params.gameid,
                    name: newWallName
                },
                {
                    withCredentials: true
                }
            )
            .then((response) => {
                if (response.status === 200) {
                    newWallName = "";
                    fetchWalls();
                    return true;
                } else return false;
            })
            .catch((err) => {
                console.error(err);
                return false;
            });
    }

    function addNewWallCancel() {
        newWallName = "";
    }

    async function deleteWall() {
        if (!wallToDelete) return false;
        if (wallToDelete._id === selectedWall?._id) selectedWall = undefined;
        return axios
            .delete(url(`/wall/${wallToDelete._id}`), { withCredentials: true })
            .then((response) => {
                if (response.status === 200) {
                    wallToDelete = undefined;
                    fetchWalls();
                    return true;
                } else return false;
            })
            .catch((err) => {
                console.error(err);
                return false;
            });
    }

    function deleteWallCancel() {
        wallToDelete = undefined;
    }

    onMount(() => {
        fetchGame().then(() => fetchWalls());
    });
</script>

<div class="flex h-full flex-col">
    <div class="mr-4 flex items-center gap-4">
        <h1 class="m-4 text-4xl font-bold">{game ? game.name : "Spiel"}</h1>
        <div class="grow"></div>
        <button class="btn" type="button" onclick={() => goto("/editor")}>Zurück</button>
    </div>
    <div class="flex grow">
        <!-- Sidebar -->
        <div class="flex h-full max-w-[600px] min-w-[400px] flex-col gap-4 border-r-1">
            <div>
                <button class="btn ms-4 me-4" type="button" onclick={() => (showNewWall = true)}
                    >Wand hinzufügen</button
                >
            </div>
            {#each walls as wall}
                <!-- svelte-ignore a11y_click_events_have_key_events -->
                <!-- svelte-ignore a11y_no_static_element_interactions -->
                <div
                    class="ms-4 me-4 flex items-center justify-between rounded-xl border-2 p-2 hover:cursor-pointer hover:bg-emerald-200"
                    class:bg-emerald-200={selectedWall?._id === wall._id}
                    onclick={() => {
                        selectedWall = wall;
                    }}
                >
                    <div>
                        {wall.name}
                    </div>
                    <!-- svelte-ignore a11y_consider_explicit_label -->
                    <button
                        type="button"
                        class="btn border-red-600 text-red-600"
                        onclick={(event) => {
                            event.stopPropagation();
                            wallToDelete = wall;
                            showDeleteWall = true;
                        }}><i class="fa-solid fa-trash"></i></button
                    >
                </div>
            {/each}
        </div>
        <!-- Wall -->
        {#if selectedWall}
            <div class="ms-4 me-4 grow">
                <Wall
                    wall={selectedWall}
                    visited={[]}
                    onclickIds={(catId, queId) => {
                        console.log(catId, queId);
                        if (selectedWall)
                            goto(
                                `/editor/${page.params.gameid}/${selectedWall._id}/${catId}/${queId}`
                            );
                    }}
                ></Wall>
            </div>
        {/if}
    </div>
</div>

<Modal bind:showModal={showNewWall} okFn={addNewWall} cancelFn={addNewWallCancel}>
    {#snippet header()}
        <h2 class="text-3xl">Neue Wand</h2>
    {/snippet}
    <div>
        <label for="directory" class="">Name</label>
        <div>
            <Textfield bind:value={newWallName}></Textfield>
        </div>
        {#if error.length > 0}
            <div class="text-red-700">{error}</div>
        {/if}
    </div>
</Modal>

<Modal bind:showModal={showDeleteWall} okFn={deleteWall} cancelFn={deleteWallCancel}>
    {#snippet header()}
        <h2 class="text-3xl">Wand löschen</h2>
    {/snippet}

    <div>Soll die Wand {wallToDelete?.name} wirklich gelöscht werden?</div>
    {#if error.length > 0}
        <div class="text-red-700">{error}</div>
    {/if}
</Modal>
