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

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;
  //TODO: Implement Logic to Create the Game and Redirect to Lobby
  await delay(3000)
  isLoading.value = false;
    $q.notify({
      message: `Lobby "${lobbyName.value}" erfolgreich erstellt!`,
      color: 'green-6',
      icon: 'check_circle',
      position: 'top'
    });
    router.push({ name: 'mainmenu'});
}
</script>

<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex justify-start items-center column ">
        <header class="text-center q-mb-xl">
          <h1 class="game-title text-white q-my-none">
            KnockOutWhist
          </h1>
          <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>
      </q-page>
    </q-page-container>
  </q-layout>
</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>
