<template>
  <AdminTile title="Players" icon-bottom="add" @icon-click="addPlayer">
    <table class="players-tile__table">
      <tr>
        <th class="players-tile__table-head">{{ $t('name') }}:</th>
        <th class="players-tile__table-head">{{ $t('num-quotes') }}</th>
        <th class="players-tile__table-head">{{ $t('score') }}</th>
        <th class="players-tile__table-head">{{ $t('last-logged-in') }}</th>
      </tr>
      <tr v-for="player in players" class="players-tile__row" :key="player.id">
        <td>
          {{ player.name }}
          <div v-if="player.role === 'gamemaster'" class="players-tile__is-gamemaster"><Icon name="crown" /></div>
        </td>
        <td>{{ player.numQuotes }}</td>
        <td>{{ player.score }}</td>
        <td>{{ player.lastLoggedIn === 0 ? '-' : datetime(player.lastLoggedIn) }}</td>
      </tr>
    </table>
  </AdminTile>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import useI18n from '@/composables/useI18n'
import useDateFormatter from '@/composables/useDateFormatter';
import type { GameInfo } from '@/composables/engine.d'

const props = defineProps<{
  gameinfo: GameInfo
}>()
// const emit = defineEmits(['update'])

const { $t } = useI18n({
  name: { en: 'Name', de: 'Name' },
  'num-quotes': { en: '# quotes', de: '# Quotes' },
  'score': { en: 'Score', de: 'Score' },
  'last-logged-in': { en: 'last logged in', de: 'zuletzt eingeloggt' },
})
const { datetime } = useDateFormatter()

const players = computed(() => {
  return props.gameinfo.players.sort((a, b) => a.name.localeCompare(b.name))
})

const addPlayer = () => {
  alert('not yet implemented')
}
</script>

<style lang="scss">
.players-tile {
  &__container {
    width: 100%;
    height: 100%;
  }

  &__table {
    margin: 0 0 16px -12px;
    border-collapse: separate;
    border-spacing: 12px 0;
  }

  &__table-head {
    text-align: left;
    margin: 8px;
  }

  &__row {
    height: 24px;
  }

  &__is-gamemaster {
    display: inline-block;
    margin-left: 4px;
    width: 16px;
    height: 14px;
  }
}
</style>