<script setup lang="ts">
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import { useRouter } from 'vue-router';
import axios from "axios";

const api = window?.__RUNTIME_CONFIG__?.API_URL;
const lobbyName = ref('');
const isPublic = ref(false);
const playerAmount = ref(2);
const $q = useQuasar();
const isLoading = ref(false);
const router = useRouter();
const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
const createGameQuasar = async () => {
  if (!lobbyName.value) {
    $q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
    return;
  }
  isLoading.value = true;
  axios.post(`${api}/createGame`, {lobbyname: lobbyName.value, playeramount: playerAmount.value.toString()}, {withCredentials: true}).then((response) => {
    const responseData = response.data
    console.log("Response" + responseData.status)
    $q.notify({
      message: `Lobby "${lobbyName.value}" erfolgreich erstellt mit gameId ${responseData.gameId}!`,
      color: 'green-6',
      icon: 'check_circle',
      position: 'top'
    });
    router.push("/lobby")
  }).catch((err) => {
    console.log("ERROR:" + err)
  }).finally(() =>
    isLoading.value = false
  )
}
</script>

<template>
  <header class="text-center q-mb-xl">
    <p
      class="text-h5 text-grey-4 q-mt-md"
      style="max-width: 900px; margin-left: auto; margin-right: auto;"
    >
      Are you ready to play? Please select a lobbyname of your choice, the amount of players you want
      to play with and you are ready to go!
    </p>
  </header>
        <div class="q-pa-md" style="width: 100%; max-width: 400px;">
          <div>
            <q-input
              v-model="lobbyName"
              label="Lobbyname"
              placeholder="Lobby 1"
              filled
              dark
              label-color="white"
              color="white"
              :rules="[val => !!val || 'Lobbyname is missing']"
            />
          </div>

          <div class="q-mb-md">
            <q-toggle
              v-model="isPublic"
              label="public/private"
              checked-icon="check"
              unchecked-icon="close"
              color="primary"
              disable
              dark
            />
          </div>

          <div class="q-mb-md">
            <div class="text-subtitle1 q-mb-xs text-white">Players: {{ playerAmount }}</div>

            <q-slider
              v-model="playerAmount"
              :min="2"
              :max="7"
              :step="1"
              color="primary"
              dark
            />

            <div class="row justify-between q-mt-sm text-caption text-grey-4">
              <span>2</span>
              <span>3</span>
              <span>4</span>
              <span>5</span>
              <span>6</span>
              <span>7</span>
            </div>
          </div>

          <div class="text-center q-mt-lg">
            <q-btn
              :loading="isLoading"
              label="Create Game"
              color="positive"
              rounded
              @click="createGameQuasar"
              size="lg"
              class="full-width"
            />
          </div>

        </div>
</template>

<style scoped>
.game-title {
  font-family: serif;


  font-size: 5rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #FFD700;

  text-shadow:
    2px 2px 0px #000000,
    4px 4px 0px #8B4513,
    6px 6px 12px rgba(0, 0, 0, 0.9);
}
</style>
