<script setup lang="ts">
defineProps<{
  countBasic: number;
  countAdvanced: number;
  now: string | null | undefined;
  ending: boolean;
}>();

const emit = defineEmits<{
  endExam: [];
  nextQuestion: [];
}>();
</script>

<template>
  <div
    class="flex flex-col items-stretch p-4 gap-10 border-l border-base-300 bg-base-100"
  >
    <button class="btn btn-warning btn-xl" @click="emit('endExam')">
      Zakończ egzamin
    </button>

    <div class="flex flex-row gap-6 *:flex-1 w-full">
      <CurrentQuestionCount
        :class="now === 'basic' ? 'font-semibold' : 'opacity-45'"
      >
        <template #title> Pytania podstawowe </template>
        <template #count> {{ countBasic + 1 }} / 20 </template>
      </CurrentQuestionCount>

      <CurrentQuestionCount
        :class="now === 'advanced' ? 'font-semibold' : 'opacity-45'"
      >
        <template #title> Pytania specjalistyczne </template>
        <template #count> {{ countAdvanced + 1 }} / 12 </template>
      </CurrentQuestionCount>
    </div>

    <div class="text-center text-xl flex flex-col gap-2">
      <span>Czas na zapoznanie się z pytaniem</span>
      <div class="flex flex-row items-stretch gap-2">
        <div class="btn btn-primary">START</div>
        <div class="h-full flex-1 relative">
          <progress
            class="progress progress-warning w-full h-full"
            value="50"
            max="100"
          />
          <span class="block set-translate z-10 text-black text-2xl">20s</span>
        </div>
      </div>
    </div>

    <div class="text-center text-xl flex flex-col gap-2">
      <span>Czas na udzielenie odpowiedzi</span>
      <div class="h-9 relative">
        <progress
          class="progress progress-warning w-full h-full"
          value="50"
          max="100"
        />
        <span class="block set-translate z-10 text-black text-2xl">15s</span>
      </div>
    </div>

    <div class="flex-1" />

    <button
      class="btn btn-warning btn-xl"
      :disabled="ending"
      @click="emit('nextQuestion')"
    >
      Następne pytanie
    </button>
  </div>
</template>

<style>
/*.progressive {
  animation: progressZapoznanie 20s linear;
}

@keyframes progressZapoznanie {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}*/
</style>
