<script setup lang="ts">
useHead({
  title: 'Test na prawo jazdy',
});

const categories = [
  'A',
  'B',
  'C',
  'D',
  'T',
  'AM',
  'A1',
  'A2',
  'B1',
  'C1',
  'D1',
  'PT',
];

const loading = ref(false);

const examStore = useExamStore();

function setAndGo(category: string) {
  loading.value = true;
  examStore.setCategory(category);
  while (true) {
    if (examStore.category === category) {
      return navigateTo('/exam');
    }
  }
}
</script>

<template>
  <div>
    <div v-if="!loading" class="text-3xl">
      <span>Test na prawo jazdy</span>
      <p>
        Witaj w teście na prawo jazdy, aby rozpocząć, naciśnij jeden z
        poniższych przycisków:
        <br />
      </p>
      <div class="flex flex-row flex-wrap gap-2">
        <button
          v-for="category in categories"
          :key="`btn-${category}`"
          class="btn btn-xl btn-secondary"
          @click="setAndGo(category)"
        >
          {{ category }}
        </button>
      </div>
    </div>
    <Loading v-else />
  </div>
</template>
