<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");

const boxesAmount = computed(() => {
  if (isBasic.value) {
    return 20 + 1;
  } else if (isAdvanced.value) {
    return 12 + 1;
  } else {
    return 0;
  }
});

const countSwitchable = computed(() => {
  if (isBasic.value) {
    return props.countBasic;
  } else if (isAdvanced.value) {
    return props.countAdvanced;
  } else {
    return 0;
  }
});
</script>

<template>
  <div
    class="flex flex-col items-center p-4 gap-6 border-l border-slate-300 bg-slate-100"
  >
    <div>
      <button @click="$emit('nav', '/')" class="btn-major">
        Wróć na stronę główną
      </button>
    </div>
    <div class="flex flex-row gap-6 *:flex-1 w-full">
      <button
        class="text-md text-white bg-blue-400"
        @click="$emit('change-now', 'basic')"
      >
        Pytania podstawowe
      </button>
      <button
        class="text-md text-white bg-blue-400"
        @click="$emit('change-now', 'advanced')"
      >
        Pytania specjalistyczne
      </button>
    </div>
    <div
      class="grid grid-cols-[repeat(auto-fit,50px)] gap-2 justify-around w-full"
    >
      <div
        v-for="num in range(1, boxesAmount)"
        class="p-1 bg-blue-500 text-white text-center cursor-pointer"
        @click="$emit('change-count', num - 1)"
        :class="`${
          isBasic
            ? result.basic[num - 1].question?.poprawna_odp.toLowerCase() ==
              result.basic[num - 1].chosen_answer
              ? 'bg-green-500'
              : 'bg-red-500'
            : ''
        }${
          isAdvanced
            ? result.advanced[num - 1].question?.poprawna_odp.toLowerCase() ==
              result.advanced[num - 1].chosen_answer
              ? 'bg-green-500'
              : 'bg-red-500'
            : ''
        } ${countSwitchable + 1 == num ? '!bg-orange-500' : ''}`"
      >
        {{ num }}
      </div>
    </div>
    <!-- <div class="flex flex-row gap-6 *:flex-1 w-full">
      <button class="text-md text-white bg-blue-400">
        Odtwórz film ponownie
      </button>
      <button class="text-md text-white bg-blue-400">
        Pokaż poprawną odpowiedź
      </button>
    </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>
      <button @click="$emit('nav', '/exam')" class="btn-major">
        Rozpocznij jeszcze raz
      </button>
    </div>
  </div>
</template>
