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

const props = defineProps<{
  result: ResultEndType;
  countBasic: number;
  countAdvanced: number;
  question: BasicQuestion | AdvancedQuestion | undefined;
  questionBasic: BasicQuestion | undefined;
  questionAdvanced: AdvancedQuestion | undefined;
  now: string | null | undefined;
}>();

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

<template>
  <div
    class="flex flex-col items-stretch p-4 gap-6 border-l border-slate-300 bg-slate-100"
  >
    <button @click="$emit('nav', '/')" class="btn btn-warning btn-xl">
      Wróć na stronę główną
    </button>
    <div class="flex flex-row gap-4 *:flex-1 w-full flex-wrap">
      <button class="btn btn-info btn-lg" @click="$emit('change-now', 'basic')">
        Pytania podstawowe
      </button>
      <button
        class="btn btn-info btn-lg"
        @click="$emit('change-now', 'advanced')"
      >
        Pytania specjalistyczne
      </button>
    </div>
    <div
      class="grid grid-cols-[repeat(auto-fit,50px)] gap-2 justify-around w-full"
    >
      <input
        type="radio"
        :aria-label="(num + 1).toString()"
        class="btn btn-md"
        name="chooser"
        v-for="num in range(0, 20)"
        @click="
          $emit('change-now', 'basic');
          $emit('change-count', num);
        "
        :class="`${
          result.basic[num].question?.poprawna_odp.toLowerCase() ==
          result.basic[num].chosen_answer
            ? 'btn-success'
            : 'btn-error'
        }`"
        :checked="isBasic ? countBasic == num : false"
        :key="`choose-${num}-basic`"
      />
    </div>
    <div
      class="grid grid-cols-[repeat(auto-fit,50px)] gap-2 justify-around w-full"
    >
      <input
        type="radio"
        :aria-label="`${num + 1}`"
        class="btn btn-md"
        name="chooser"
        v-for="num in range(0, 12)"
        @click="
          $emit('change-now', 'advanced');
          $emit('change-count', num);
        "
        :class="`${
          result.advanced[num].question?.poprawna_odp.toLowerCase() ==
          result.advanced[num].chosen_answer
            ? 'btn-success'
            : 'btn-error'
        }`"
        :checked="isAdvanced ? countAdvanced == num : false"
        :key="`choose-${num}-advanced`"
      />
    </div>
    <div class="text-center text-4xl flex flex-col gap-5">
      <span class="block">Poprawna odpowiedź</span>
      <span class="block">{{ question?.poprawna_odp }}</span>
      <span class="block">Zaznaczona odpowiedź</span>
      <span class="block">
        {{
          isBasic
            ? result.basic[countBasic].chosen_answer.trim() == ""
              ? "BrakBasic"
              : result.basic[countBasic].chosen_answer
            : isAdvanced
            ? result.advanced[countAdvanced].chosen_answer.trim() == ""
              ? "BrakAdvanced"
              : result.advanced[countAdvanced].chosen_answer
            : "Błąd"
        }}
      </span>
    </div>
    <div class="flex-1"></div>
    <button @click="$emit('nav', '/exam')" class="btn btn-warning btn-xl">
      Rozpocznij jeszcze raz
    </button>
  </div>
</template>
