<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-sheet width="100%" class="text-centered pa-2 w-75" rounded>
    <h1 class="text-center">Spiel Erstellen</h1>
    <v-divider class="mb-4"></v-divider>
    <v-row>
      <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-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>
  </v-sheet>
</template>

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