<script setup lang="ts">
import "7.css/dist/7.scoped.css";

const props = defineProps<{
  result: ResultEndType;
  countBasic: number;
  countAdvanced: number;
  dataBasic: BasicQuestion[] | null;
  dataAdvanced: AdvancedQuestion[] | null;
  now: string | null | undefined;
  ending: boolean;
}>();

const isBasic = computed(() => props.now == "basic");
const isAdvanced = computed(() => props.now == "advanced");
</script>

<template>
  <div
    class="flex flex-col items-center p-4 gap-10 border-l border-slate-300 bg-slate-100"
  >
    <div>
      <button @click="$emit('end-exam')" class="btn-major">
        Zakończ egzamin
      </button>
    </div>
    <div class="flex flex-row gap-6 *:flex-1 w-full">
      <div :class="isBasic ? '' : 'opacity-45'">
        <span class="text-lg">Pytania podstawowe</span>
        <div class="win7 *:!h-10 *:*:!h-10 *:*:*:h-10 text-lg">
          <div
            role="progressbar"
            class="relative"
            :class="isBasic ? 'animate' : ''"
          >
            <div :class="`w-full`">
              <div
                class="set-translate w-full text-center bg-blue-500 bg-opacity-60"
                :class="isBasic ? 'font-semibold' : ''"
              >
                <span class="block set-translate w-full text-center"
                  >{{ countBasic + 1 }} / {{ dataBasic?.length }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="isAdvanced ? '' : 'opacity-45'">
        <span class="text-lg">Pytania specjalistyczne</span>
        <div class="win7 *:!h-10 *:*:!h-10 *:*:*:h-10 text-lg">
          <div
            role="progressbar"
            class="relative"
            :class="isAdvanced ? 'animate' : ''"
          >
            <div class="w-full">
              <div
                class="set-translate w-full text-center bg-blue-500 bg-opacity-60"
                :class="isAdvanced ? 'font-semibold' : ''"
              >
                <span class="block set-translate w-full text-center">
                  {{ countAdvanced + 1 }} / {{ dataAdvanced?.length }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center text-xl">
      Czas na zapoznanie się z pytaniem

      <div class="flex flex-row items-stretch">
        <div class="btn-major">START</div>
        <div class="win7 flex-1 *:!h-[100%] *:*:!h-[100%]">
          <div role="progressbar" class="relative min-h-6">
            <div class="progressive !bg-orange-500">
              <div class="set-translate w-full text-center text-3xl">10 s</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center text-xl">
      Czas na udzielenie odpowiedzi

      <div class="flex flex-row items-stretch">
        <div class="win7 flex-1 *:!h-[100%] *:*:!h-[100%]">
          <div role="progressbar" class="relative min-h-6">
            <div class="progressive !bg-orange-500">
              <div class="set-translate w-full text-center text-3xl">10 s</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <button
        @click="$emit('next-question')"
        class="btn-major"
        :disabled="ending"
      >
        Następne pytanie
      </button>
    </div>

    <br />

    <div class="max-h-[150px] overflow-y-scroll">{{ result }}</div>
  </div>
</template>

<style>
.set-translate {
  @apply absolute top-[50%] left-[50%];
  transform: translate(-50%, -50%);
}

.progressive {
  animation: progressZapoznanie 20s linear;
}

.btn-major:disabled,
.btn-major:disabled:hover {
  @apply cursor-not-allowed bg-orange-600 !bg-opacity-40;
}

@keyframes progressZapoznanie {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
</style>
