<script setup lang="ts">
import type { GameSettings } from '@/scripts/interfaces/GameSettings';
import Slider from './Slider.vue';

let settingsProp = defineModel<GameSettings>('settings', {
  required: true,
});

defineEmits(['createGame']);

function gameFieldPreset(x: number, y: number) {
  settingsProp.value.fieldSize.x = x;
  settingsProp.value.fieldSize.y = y;
}
</script>

<template>
  <v-container class="d-flex align-center justify-center fill-height">
    <v-sheet width="100%" class="text-centered pa-2 w-75" rounded>
      <h1 class="text-center mb-4">Spiel Erstellen</h1>
      <v-divider class="mb-4"></v-divider>
      <v-row class="d-flex align-center justify-space-evenly ma-4 w-100" v-if="!settingsProp.message">
        <v-col cols="12" md="6">
          <h2 class="settingsCat">Spieler</h2>
          <v-text-field
            v-model="settingsProp.playerName1"
            label="Name vom Spieler 1"
            required
          ></v-text-field>
          <v-text-field
            v-if="settingsProp.playerName2 != null"
            v-model="settingsProp.playerName2"
            label="Name vom Spieler 2"
            required
          ></v-text-field>
        </v-col>
        <v-col cols="12" md="6">
          <h2 class="settingsCat">Spielfeld</h2>
          <v-chip-group>
            <v-chip text="Klein" @click="gameFieldPreset(4, 5)"></v-chip>
            <v-chip text="Standard" @click="gameFieldPreset(7, 6)"></v-chip>
            <v-chip text="Groß" @click="gameFieldPreset(12, 10)"></v-chip>
          </v-chip-group>
          <Slider
            v-model="settingsProp.fieldSize.x"
            label="Breite"
            :min="4"
            :max="16"
            :step="1"
            :width="70"
          />

          <Slider
            v-model="settingsProp.fieldSize.y"
            label="Höhe"
            :min="4"
            :max="16"
            :step="1"
            :width="70"
          />
        </v-col>
      </v-row>
      <div class="d-flex align-center justify-space-evenly ma-4 w-100" v-if="!settingsProp.message">
        <v-btn color="red" @click="$router.push('/')" rounded="xl"> Abbrechen </v-btn>
        <v-btn color="primary" @click="$emit('createGame')" rounded="xl"> Spiel Starten </v-btn>
      </div>
      <h2 v-else class="text-center">{{ settingsProp.message }}</h2>
    </v-sheet>
  </v-container>
</template>

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