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

const props = defineProps<{
  countBasic: number;
  countAdvanced: number;
  now: string | null | undefined;
  ending: boolean;
  setBasic: boolean;
  time: number;
  phase: string;
}>();

const emit = defineEmits<{
  endExam: [];
  nextQuestion: [];
  nextTime: [];
  showEndModal: [];
}>();

function tryEndExam() {
  if (props.ending == false) {
    emit('showEndModal');
  } else {
    emit('endExam');
  }
}

const startButton = useTemplateRef('start-button');

onKeyStroke(['S', 's'], () => {
  startButton.value?.click();
});

const nextButton = useTemplateRef('next-button');

onKeyStroke(['D', 'd'], () => {
  nextButton.value?.click();
});

const endButton = useTemplateRef('end-button');

onKeyStroke(['X', 'x'], () => {
  endButton.value?.click();
});
</script>

<template>
  <div
    class="flex flex-col items-stretch p-4 gap-10 border-l border-base-300 bg-base-100"
  >
    <button
      ref="end-button"
      class="btn btn-warning btn-xl"
      @click="tryEndExam()"
    >
      {{ $t('endExam') }}
    </button>

    <div class="flex flex-row gap-6 *:flex-1 w-full">
      <CurrentQuestionCount
        :class="now === 'basic' ? 'font-semibold' : 'opacity-45'"
      >
        <template #title>
          {{ $t('basicQuestions') }}
        </template>
        <template #count> {{ countBasic + 1 }} / 20 </template>
      </CurrentQuestionCount>

      <CurrentQuestionCount
        :class="now === 'advanced' ? 'font-semibold' : 'opacity-45'"
      >
        <template #title>
          {{ $t('advancedQuestions') }}
        </template>
        <template #count> {{ countAdvanced + 1 }} / 12 </template>
      </CurrentQuestionCount>
    </div>

    <div
      v-if="phase == 'set-basic'"
      class="text-center text-xl flex flex-col gap-2"
    >
      <span>
        {{ $t('timeToGetAcquaintedWithTheQuestion') }}
      </span>
      <div class="flex flex-row items-stretch gap-2">
        <div
          ref="start-button"
          class="btn btn-primary"
          @click="emit('nextTime')"
        >
          {{ $t('startBtn') }}
        </div>
        <div class="h-full flex-1 relative">
          <progress
            class="progress progress-warning w-full h-full"
            :value="time"
            max="20"
          ></progress>
          <span class="block set-translate z-10 text-black text-2xl">
            {{ time >= 0 ? time : 0 }} {{ $t('second') }}
          </span>
        </div>
      </div>
    </div>

    <div v-else class="text-center text-xl flex flex-col gap-2">
      <span>
        {{ $t('timeForAnswer') }}
      </span>
      <div class="h-9 relative">
        <progress
          class="progress progress-warning w-full h-full"
          :value="time"
          :max="phase == 'start-basic' ? 15 : 45"
        ></progress>
        <span class="block set-translate z-10 text-black text-2xl">
          {{ time >= 0 ? time : 0 }} {{ $t('second') }}
        </span>
      </div>
    </div>

    <div class="flex-1">
      <span class="text-xl">
        {{ $t('keybinds') }}
      </span>
      <table class="table table-sm">
        <tbody>
          <tr
            v-for="key in ['S', 'D', 'X', 'T / Y', 'N', 'A', 'B', 'C']"
            :key="`keybind${key}`"
          >
            <td>{{ key }}</td>
            <td>{{ $t(`bindedKeys.${key}`) }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <button
      ref="next-button"
      class="btn btn-warning btn-xl"
      :disabled="ending || setBasic"
      @click="emit('nextQuestion')"
    >
      {{ $t('nextQuestion') }}
    </button>
  </div>
</template>

<style>
.progressive {
  width: calc(100% / v-bind('time'));
  transition: all 1s linear;
}

progress[value]::-webkit-progress-value {
  transition: width 0.5s;
}
</style>
