<script lang="ts" setup>
import { onKeyStroke } from '@vueuse/core';

const props = defineProps<{
  question: Question;
  phase: string;
}>();

const answer = defineModel<string | null | undefined>();

const aButton = useTemplateRef('A-button');

onKeyStroke(['A', 'a'], () => {
  if (props.phase != 'result') {
    aButton.value[0].click();
  }
});

const bButton = useTemplateRef('B-button');

onKeyStroke(['B', 'b'], () => {
  if (props.phase != 'result') {
    bButton.value[0].click();
  }
});

const cButton = useTemplateRef('C-button');

onKeyStroke(['C', 'c'], () => {
  if (props.phase != 'result') {
    cButton.value[0].click();
  }
});
</script>

<template>
  <div
    class="flex flex-col gap-5 border-t px-4 py-5 border-base-300 bg-base-100"
  >
    <div class="text-xl">
      {{ question?.text }}
    </div>
    <div class="flex flex-col gap-3">
      <div
        v-for="[element, value] of Object.entries({
          A: (question as AdvancedQuestion)?.answer_a,
          B: (question as AdvancedQuestion)?.answer_b,
          C: (question as AdvancedQuestion)?.answer_c,
        })"
        :key="`btn_answer_${element}_${value}`"
      >
        <input
          :id="`odp_${element}`"
          :ref="`${element}-button`"
          v-model="answer"
          type="radio"
          name="abc"
          :value="element"
          class="hidden"
        />
        <label :for="`odp_${element}`">
          <div
            :class="
              phase == 'exam'
                ? answer === element
                  ? ' !btn-secondary'
                  : ''
                : `${answer === element ? 'outline-set-solid outline-2' : ''} ${element == question?.correct_answer ? 'btn-success' : 'btn-error'}`
            "
            class="btn btn-primary btn-lg"
          >
            {{ element }}
          </div>
          <span class="block">{{ value }}</span>
        </label>
      </div>
    </div>
  </div>
</template>

<style scoped>
label {
  @apply cursor-pointer flex flex-row gap-2 items-center;
  &:hover {
    @apply bg-base-200;
  }
}
span {
  @apply text-lg;
}
</style>
