<script setup lang="ts">
import { range } from 'lodash';

defineProps<{
  result: ResultEndType;
  countBasic: number;
  countAdvanced: number;
  now: string | null | undefined;
}>();

const emit = defineEmits<{
  changeNow: [value: string];
  changeCount: [num: number];
}>();
</script>

<template>
  <div
    class="flex flex-col items-stretch p-4 gap-6 border-l border-base-300 bg-base-100"
  >
    <NuxtLink to="/" class="btn btn-warning btn-xl">
      Wróć na stronę główną
    </NuxtLink>

    <button class="btn btn-info btn-lg" @click="emit('changeNow', 'basic')">
      Pytania podstawowe
    </button>

    <div
      class="grid grid-cols-[repeat(auto-fit,50px)] gap-2 justify-around w-full"
    >
      <input
        v-for="num in range(0, 20)"
        :key="`choose-${num}-basic`"
        type="radio"
        :aria-label="(num + 1).toString()"
        class="btn btn-md"
        name="chooser"
        :class="`${
          result.basic[num].question?.correct_answer ===
          result.basic[num].chosen_answer
            ? 'btn-success'
            : 'btn-error'
        }`"
        :checked="now === 'basic' ? countBasic === num : false"
        @click="
          emit('changeNow', 'basic');
          emit('changeCount', num);
        "
      />
    </div>

    <button class="btn btn-info btn-lg" @click="emit('changeNow', 'advanced')">
      Pytania specjalistyczne
    </button>

    <div
      class="grid grid-cols-[repeat(auto-fit,50px)] gap-2 justify-around w-full"
    >
      <input
        v-for="num in range(0, 12)"
        :key="`choose-${num}-advanced`"
        type="radio"
        :aria-label="`${num + 1}`"
        class="btn btn-md"
        name="chooser"
        :class="`${
          result.advanced[num].question?.correct_answer ===
          result.advanced[num].chosen_answer
            ? 'btn-success'
            : 'btn-error'
        }`"
        :checked="now === 'advanced' ? countAdvanced === num : false"
        @click="
          emit('changeNow', 'advanced');
          emit('changeCount', num);
        "
      />
    </div>
    <div class="flex-1">
      <div class="*:inline">Punkty: <slot name="points" /> / 74</div>
      <div class="*:inline">Wynik: <slot name="resultTrueFalse" /></div>
    </div>
    <NuxtLink to="/exam" class="btn btn-warning btn-xl">
      Rozpocznij jeszcze raz
    </NuxtLink>
  </div>
</template>
