<script lang="ts">
    import { goto } from "$app/navigation";
    import { env } from "$env/dynamic/public";
    import RessourceManager from "$lib/RessourceManager.svelte";
    import UserSvelte from "$lib/User.svelte";
    import websocket, { SocketConnectionType } from "$lib/websocket.svelte";
    import axios from "axios";

    let showRessourceManager = $state(false);

    $effect(() => {
        if (websocket.connectionType === SocketConnectionType.HOST) {
            console.log(`Type: ${websocket.connectionType}. Redirecting to /connected/games`);
            goto("/connected/games");
        }
        if (websocket.connectionType === SocketConnectionType.DISPLAY) {
            console.log(`Type: ${websocket.connectionType}. Redirecting to /connected/display`);
            goto("/connected/display");
        }
    });

    function logout() {
        cookieStore
            .delete("jeopardytoken")
            .then(() => {
                goto("/login");
            })
            .catch((e) => {
                alert("Logout fehlgeschlagen!");
                goto("/login");
            });
    }

    async function logoutFromAllDevices() {
        axios
            .post(
                `${env.PUBLIC_JEOPARDY_SERVER_PROTOCOL}://${env.PUBLIC_JEOPARDY_SERVER}/user/logout`,
                {},
                {
                    withCredentials: true
                }
            )
            .then(() => {
                logout();
            })
            .catch(() => {
                alert("Logout fehlgeschlagen!");
            });
    }
</script>

<div class="flex h-full flex-col">
    <div class="ms-4 me-4 flex items-center gap-4">
        <h1 class="text-7xl font-bold">Jeopardy</h1>
        <div class="grow"></div>
        {#if UserSvelte.role === "admin"}
            <button type="button" class="btn" onclick={() => goto("/admin")}>Administration</button>
        {/if}
        <button type="button" class="btn" onclick={() => (showRessourceManager = true)}
            >Ressourcen</button
        >
        <button type="button" class="btn" onclick={() => goto("/editor")}>Editor</button>
        <button type="button" class="btn" onclick={() => goto("/settings")}>Einstellungen</button>
        <button type="button" class="btn" onclick={logoutFromAllDevices}>Logout</button>
        <div class="btn profile ps-2 pe-2">
            <i class="fa-regular fa-user"></i>
            {UserSvelte.username}
        </div>
    </div>

    <div class="flex h-full grow items-center justify-around p-4">
        <button class="btn m-2 h-1/2 w-1/2 text-5xl" onclick={websocket.connectAsHost}
            >Spiel hosten</button
        >
        <button class="btn m-2 h-1/2 w-1/2 text-5xl" onclick={websocket.connectAsDisplay}
            >Spiel darstellen</button
        >
    </div>
</div>

<RessourceManager
    bind:show={showRessourceManager}
    ok={(res) => {
        console.log(res);
    }}
></RessourceManager>

<style>
    .profile {
        border-color: gray;
    }

    .profile:hover {
        background-color: unset !important;
        cursor: unset !important;
    }
</style>
