<script setup lang="ts">
const props = defineProps<{
  result: ResultEndType;
  countBasic: number;
  countAdvanced: number;
  dataBasic: BasicQuestion[] | null;
  dataAdvanced: AdvancedQuestion[] | null;
  now: string | null | undefined;
  ending: boolean;
}>();

const isBasic = computed(() => props.now == "basic");
const isAdvanced = computed(() => props.now == "advanced");
</script>

<template>
  <div
    class="flex flex-col items-stretch p-4 gap-10 border-l border-slate-300 bg-slate-100"
  >
    <button @click="$emit('end-exam')" class="btn btn-warning btn-xl">
      Zakończ egzamin
    </button>
    <div class="flex flex-row gap-6 *:flex-1 w-full">
      <div class="flex flex-col gap-1" :class="isBasic ? '' : 'opacity-45'">
        <span class="text-lg">Pytania podstawowe</span>
        <div
          class="info-little-box w-full text-center"
          :class="isBasic ? 'font-semibold' : ''"
        >
          {{ countBasic + 1 }} / {{ dataBasic?.length }}
        </div>
      </div>
      <div class="flex flex-col gap-1" :class="isAdvanced ? '' : 'opacity-45'">
        <span class="text-lg">Pytania specjalistyczne</span>
        <div
          class="info-little-box w-full text-center"
          :class="isAdvanced ? 'font-semibold' : ''"
        >
          {{ countAdvanced + 1 }} / {{ dataAdvanced?.length }}
        </div>
      </div>
    </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"
          ></progress>
          <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"
        ></progress>
        <span class="block set-translate z-10 text-black text-2xl">15s</span>
      </div>
    </div>
    <div class="max-h-[150px] overflow-y-scroll">
      {{ result }}
    </div>
    <div class="flex-1"></div>
    <button
      @click="$emit('next-question')"
      class="btn btn-warning btn-xl"
      :disabled="ending"
    >
      Następne pytanie
    </button>
  </div>
</template>

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

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