<script setup lang="ts">
import { computed, ref } from 'vue';
import type { GameEnded } from '@/scripts/logic/signalR/GameConnection';

const emit = defineEmits(['restartGame']);

const props = defineProps<{ gameEndedInformation: GameEnded | null }>();
const restarted = ref<boolean>(false);

const message = computed(() => {
  if(restarted.value) {
    return 'Das Spiel wird neugestartet...';
  }
  switch (props.gameEndedInformation?.method) {
    case 'PlayerDisconnected':
      return `Bei dem Spieler ${props.gameEndedInformation.player?.name} ist die Verbindung abgebrochen :(`;
    case 'Draw':
      return 'Das Spielfeld ist voll und es ist ein Unentschieden';
    case 'Win':
      return `${props.gameEndedInformation.player?.name} hat gewonnen!`;
    default:
      return '';
  }
});

function restartClicked() {
  emit('restartGame');

  restarted.value = true;
}
</script>

<template>
  <v-container class="d-flex align-center justify-center fill-height">
    <v-sheet class="text-centered pa-2 w-50" rounded>
      <h1 class="text-center mb-5">{{ message }}</h1>
      <h3 class="text-center">Spiele erneut oder beende das Spiel</h3>
      <v-divider class="mb-5 mt-5"></v-divider>
      <div class="d-flex align-center justify-space-evenly ma-4 w-100">
        <v-btn color="red" @click="$router.push('/')" rounded="xl"> Abbrechen </v-btn>
        <v-btn color="primary" @click="restartClicked()" rounded="xl" :disabled="restarted"> Spiel Neustarten </v-btn>
      </div>
    </v-sheet>
  </v-container>
</template>

<style scoped>
.settingsCat {
  margin-top: 5px;
}
</style>
