<script setup lang="ts">
import { getAuthClient } from '@/api/auth_client';
import type { Place, Story } from '@/api/generated/crabs/evening_detective_server';
import HeaderMenu from '@/components/HeaderMenu.vue'
import { NCard, NFlex, NInput, NModal, NSpace, NText, NUpload, NUploadDragger, NAlert, NTag, NButton } from 'naive-ui'
import { useMessage } from 'naive-ui';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import PlaceBlock from '@/components/PlaceBlock.vue'
import GameInputForm from '@/components/GameInputForm.vue'

const client = getAuthClient()
const message = useMessage()
const route = useRoute()
const teamId = route.params.id
const password = route.query.password

const story = ref<AdvancedStory>({
    places: []
})

const code = ref('')

async function getStory() {
    const res = await client.GetTeamStory({
        id: Number(teamId),
        password: password as string
    })
    if (res.error != '') {
        message.error(res.error!)
        return
    }
    story.value = {
        places: res.story!.places?.map((item) => {
            return {
                place: item,
                mode: 'show'
            }
        }) || []
    }
}
getStory()

async function addAction(newCode: string) {
    const res = await client.AddTeamAction({
        id: Number(teamId),
        password: password as string,
        code: newCode
    })
    if (res.error != '') {
        message.error(res.error!)
        return
    }
    await getStory()
    code.value = ''
}

type AdvancedStory = {
    places: AdvancedPlace[];
}

type AdvancedPlace = {
    place: Place;
    mode: string;
}
</script>

<template>
    <div class="center-block-custom bottom-margin">

        <div class="width700">
            <GameInputForm :addAction="addAction"></GameInputForm>

            <PlaceBlock :place="advancedPlace.place" v-model:mode="advancedPlace.mode"
                v-for="advancedPlace in story.places" v-bind:key="advancedPlace.place.code" :addAction="addAction">
            </PlaceBlock>
        </div>
    </div>

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

<style scoped>
.bottom-margin {
    height: calc(100dvh - 70px - 76px);
}

@media (width >=1024px) {
    .bottom-margin {
        height: calc(100dvh - 70px - 76px);
    }
}
</style>
