<script setup lang="ts">
import {computed, toRefs} from 'vue'
import type {PlayerQueue} from "@/types/GameSubTypes.ts";
import {useIngame} from "@/composables/useIngame.ts";
import type {GameInfo} from "@/types/GameTypes.ts";

const ig = useIngame()
const currentPlayer = computed(() => (<GameInfo>ig.data).playerQueue?.currentPlayer)
const queue = computed(() => { return (<GameInfo>ig.data).playerQueue?.queue ?? []})
</script>

<template>
  <q-card flat class="turn-tracker-container q-pa-md no-background">
    <q-card-section>
      <div class="text-subtitle2 q-mb-xs">Current Player</div>
      <div id="current-player-name" class="text-h6 text-weight-bold text-positive">{{
          currentPlayer?.name
        }}</div>

      <div v-if="queue.length > 0" class="q-mt-md">
        <div id="next-players-text" class="text-subtitle2 q-mb-xs">Next Players</div>
        <q-list id="next-players-container" dense>
          <q-item v-for="player in queue" :key="player.id">
            <q-item-section>
              <div class="text-body1 text-primary">{{ player.name }}</div>
            </q-item-section>
          </q-item>
        </q-list>
      </div>
    </q-card-section>
  </q-card>
</template>

<style scoped>
.turn-tracker-container {
  max-width: 320px;
}
.no-background {
  background: none !important;
}
</style>
