<script setup lang="ts">
import { getAuthClient } from '@/api/auth_client';
import type { Game } from '@/api/generated/crabs/evening_detective_server';
import HeaderMenu from '@/components/HeaderMenu.vue'
import { useMessage } from 'naive-ui';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const client = getAuthClient()
const router = useRouter()
const route = useRoute()
const gameId = route.params.id

const message = useMessage()

const game = ref<Game>({
    id: undefined,
    name: undefined,
    description: undefined,
    startAt: undefined,
    status: undefined,
    scenario: undefined,
    teams: undefined,
})

async function getGame(id: number) {
    const res = await client.GetGame({ id: id })
    if (res.error != '') {
        message.error(res.error!)
        return
    }
    game.value = res.game!
}
getGame(Number(gameId))

async function toTeamStory(id: number, password: string) {
    router.push('/team-story/' + id + '?password=' + password)
}
</script>

<template>
    <div class="center-block-custom content-block">
        <div v-for="team in game.teams" class="team-block" @click="toTeamStory(team.id!, team.password!)">
            <div class="team-title">
                {{ team.name }}
            </div>
        </div>
    </div>

    <HeaderMenu active="games" />
</template>

<style scoped>
.team-block {
    margin: 10px 0;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #444;
}

.team-block:hover {
    cursor: pointer;
    color: #63e2b7;
}

.team-title {
    font-size: 24px;
    margin-bottom: 10px;
}
</style>
