<template>
  <ModalDialog @close="closeModalDialog" :title="$t('create-team')">
    <div class="create-team-dialog__description">{{ $t('description') }}</div>
    <div class="create-team-dialog__form">
      <label class="create-team-dialog__label">{{ $t('your-name') }}</label>
      <input id="create-team-dialog-name" class="create-team-dialog__input" v-model="playerName" size="40"/>
      <label class="create-team-dialog__label">{{ $t('team-name') }}</label>
      <input class="create-team-dialog__input" v-model="teamName" size="40"/>
      <label class="create-team-dialog__label">{{ $t('language') }}</label>
      <select class="create-team-dialog__select" v-model="lang">
        <option value="en">EN</option>
        <option value="de">DE</option>
      </select>

    </div>
    <template v-slot:footer>
      <Button class="create-team-dialog__button" :border="true" @click="createTeam">{{ $t('create-team') }}</Button>
      <Button class="create-team-dialog__button" :border="false" @click="closeModalDialog">{{ $t('cancel') }}</Button>
    </template>
  </ModalDialog>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import useI18n from '@/composables/useI18n'

const emit = defineEmits(['close'])

const { $t, getLang } = useI18n({
  'create-team': { en: 'Create Team', de: 'Team erstellen' },
  'cancel': { en: 'Cancel', de: 'abbrechen' },
  'description': { en: 'Create an account for you as a gamemaster and set team name.', de: 'Erstelle einen Useraccount für Dich als Gamemaster und setze den Teamnamen.' },
  'your-name': { en: 'Your name', de: 'Dein Name' },
  'team-name': { en: 'Team name', de: 'Teamname' },
  'language': { en: 'Language', de: 'Sprache' },
  'names-missing': { en: 'Please enter a user name and a team name.', de: 'Bitte wähle einen Benutzernamen und Teamnamen.' },
})

const closeModalDialog = () => { emit('close') }
const playerName = ref('')
const teamName = ref('')
const lang = ref(getLang())

const createTeam = () => {
  if (playerName.value.length == 0 || teamName.value.length == 0) {
    alert($t('names-missing'))
    return
  }
  alert('not yet implemented')
}

onMounted(() => {
  window.setTimeout(() => {
    document.getElementById('create-team-dialog-name')?.focus()
  }, 0)
})
</script>

<style lang="scss">
@import '~/assets/css/components';

.create-team-dialog {
  &__description {
    font-family: $font-secondary;
    font-size: 18px;
  }

  &__form {
    display: flex;
    flex-direction: column;
    margin: 32px 0;
  }

  &__label {
    display: block;
    margin: 16px 0 4px 0;
  }

  &__input {
    border: 1px solid white;
    background-color: $modal-dialog-background-color;
    color: $modal-dialog-text-color;
    border-radius: 4px;
  }

  &__select {
    margin-right: auto;
  }

  &__button~&__button {
    margin-left: 16px;
  }
}
</style>