<template>
  <AdminInfoTile title="Game">
    <table class="gameinfo-tile__table">
      <tr class="gameinfo-tile__row">
        <td>{{ $t('name') }}:</td>
        <td>{{ gameinfo.name }}</td>
        <td>
          <div class="gameinfo-tile__edit" @click="editName">
            <Icon name="edit-white" />
          </div>
        </td>
      </tr>
      <tr class="gameinfo-tile__row">
        <td>{{ $t('language') }}:</td>
        <td v-if="!editLangShowDropdown">{{ gameinfo.lang }}</td>
        <td v-if="!editLangShowDropdown">
          <div class="gameinfo-tile__edit" @click="editLang">
            <Icon name="edit-white" />
          </div>
        </td>
        <td v-if="editLangShowDropdown" colspan="2">
          <select v-model="lang" @change="editLangChange">
            <option value="en">en</option>
            <option value="de">de</option>
          </select>
        </td>
      </tr>
      <tr class="gameinfo-tile__row">
        <td>{{ $t('created') }}:</td>
        <td colspan="2">{{ date(gameinfo.created) }}</td>
      </tr>
      <tr class="gameinfo-tile__row">
        <td>{{ $t('num-players') }}:</td>
        <td colspan="2">{{ gameinfo.players.length }}</td>
      </tr>
      <tr class="gameinfo-tile__row">
        <td>{{ $t('num-quotes-played') }}:</td>
        <td colspan="2">{{ gameinfo.numQuotesTotal - gameinfo.numQuotesLeft }} / {{ gameinfo.numQuotesTotal }}</td>
      </tr>
      <tr class="gameinfo-tile__row" v-if="!showId" @click="showId = true">
        <td colspan="3">&nbsp;</td>
      </tr>
      <tr class="gameinfo-tile__row" v-if="showId">
        <td colspan="3">{{ gameinfo.id }}</td>
      </tr>
    </table>
  </AdminInfoTile>
</template>

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

const { date } = useDateFormatter()

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

const { $t } = useI18n({
  id: { en: 'Id', de: 'Id' },
  name: { en: 'Name', de: 'Name' },
  language: { en: 'Language', de: 'Sprache' },
  created: { en: 'Created', de: 'Erstellt' },
  'num-players': { en: '# Players', de: '# Spieler' },
  'num-quotes-played': { en: '# Quotes played', de: '# Aussagen gespielt' },
  'new-game-name': { en: 'New game name', de: 'Neuer Spielname' },
})

const showId = ref(false)

const editName = async (): Promise<void> => {
  const name = window.prompt(`${$t('new-game-name')}: `)
  if (name) {
    await useEngine().setGameName(name)
    emit('update')
  }
}

const lang = ref(props.gameinfo.lang)
const editLangShowDropdown = ref(false)
const editLang = () => { editLangShowDropdown.value = true }
const editLangChange = async (): Promise<void> => {
  editLangShowDropdown.value = false
  await useEngine().setGameLang(lang.value)
  emit('update')
}
</script>

<style lang="scss">
.gameinfo-tile {
  &__table {
    margin-left: -12px;
    border-collapse: separate;
    border-spacing: 12px 0;
  }

  &__row {
    height: 24px;
  }

  &__edit {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}
</style>
