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

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

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

const yesButton = useTemplateRef('true-button');

onKeyStroke(['T', 't', 'Y', 'y'], () => {
  if (props.phase != 'result') {
    yesButton.value[0].click();
  }
});

const noButton = useTemplateRef('false-button');

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

<template>
  <div
    class="flex flex-none flex-col gap-6 border-t px-4 py-5 border-base-300 bg-base-100"
  >
    <div class="text-xl">
      {{ question?.text }}
    </div>
    <div>
      <div class="flex flex-row justify-around">
        <input
          v-for="[element, value] of Object.entries({ yes: true, no: false })"
          :id="`odp_${element}`"
          :ref="`${value}-button`"
          :key="`btn_answer_${element}`"
          v-model="answer"
          type="radio"
          name="tak_nie"
          :value="value.toString()"
          class="btn btn-primary btn-xl"
          :aria-label="$t(element).toLocaleUpperCase()"
          :class="
            phase == 'exam'
              ? answer == null
                ? false
                : answer === value.toString()
                  ? '!btn-secondary'
                  : ''
              : `${
                  answer === value.toString()
                    ? 'outline-set-solid outline-2'
                    : ''
                } ${
                  question?.correct_answer?.toString() == value.toString()
                    ? ' btn-success'
                    : ' btn-error'
                }`
          "
          :checked="answer == null ? false : answer === value.toString()"
        />
      </div>
    </div>
  </div>
</template>
