<template>
  <ModalDialog v-if="show" :title="title" @close="emit('close')">
    <label class="player-dialog__label">Name</label>
    <input class="player-dialog__input" v-model="player.name" size="20" />
    <label class="player-dialog__label">Score</label>
    <input class="player-dialog__input" v-model="player.score" size="20" maxlength="4" />
    <label class="player-dialog__label">Authcode</label>
    <input class="player-dialog__input" v-model="player.authcode" size="20" maxlength="6" />
    <div class="player-dialog__id-container" @click="showId = true">
      <span class="player-dialog__id" :class="{ 'player-dialog__id__show': showId }" >{{ player.id }}</span>
    </div>
    <template v-slot:footer>
      <Button @click="emit('submit')">{{ buttonText }}</Button>
    </template>
  </ModalDialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { PlayerEdit } from '@/composables/engine.d'

const props = defineProps<{
  title: string
  show: boolean
  buttonText: string
  player: PlayerEdit
}>()

const emit = defineEmits(['close', 'submit'])
const showId = ref(false)
watch([props], () => { showId.value = false })  // reset visibility each time the dialog is shown
</script>

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

.player-dialog {
  &__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;
  }

  &__id-container {
    margin: 16px 0 0 0;
  }

  &__id {
    visibility: hidden;

    &__show {
      visibility: visible;
    }
  }
}
</style>