<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];
  again: [];
  home: [];
}>();
</script>

<template>
  <div
    class="flex flex-col items-stretch p-4 gap-6 border-l border-base-300 bg-base-100"
  >
    <div class="btn btn-warning btn-xl" @click="$emit('home')">
      {{ $t('goBackToHomePage') }}
    </div>

    <button class="btn btn-info btn-lg" @click="emit('changeNow', 'basic')">
      {{ $t('basicQuestions') }}
    </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]?.chosen_answer == ''
            ? 'btn-warning'
            : result.basic[num]?.question?.correct_answer ===
                result.basic[num]?.chosen_answer
              ? 'btn-success'
              : 'btn-error'
        } ${now === 'basic' && countBasic === num ? 'outline-set-solid outline-2' : ''}`"
        :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')">
      {{ $t('advancedQuestions') }}
    </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]?.chosen_answer == ''
            ? 'btn-warning'
            : result.advanced[num]?.question?.correct_answer ===
                result.advanced[num]?.chosen_answer
              ? 'btn-success'
              : 'btn-error'
        } ${now === 'advanced' && countAdvanced === num ? 'outline-set-solid outline-2' : ''}`"
        :checked="now === 'advanced' ? countAdvanced === num : false"
        @click="
          emit('changeNow', 'advanced');
          emit('changeCount', num);
        "
      />
    </div>
    <div class="flex-1">
      <div class="*:inline">
        {{ $t('points') }}: <slot name="points" /> / 74
      </div>
      <div class="*:inline">
        {{ $t('result') }}: <slot name="resultTrueFalse" />
      </div>
    </div>
    <div class="btn btn-warning btn-xl" @click="$emit('again')">
      {{ $t('startAgain') }}
    </div>
  </div>
</template>
