<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { useVote } from '@/composables/useVote';

import funFacts from '@/funFacts.json';
import { randomNumber } from '@/utils/randomNumber';

const {
  photosInCurrentVote,
  completionPercentage,
  userSubmittedAllVotes,
  userReachedTriviaMilestone,
  shownFactIndexes,
  pickPhotosForNewVote,
  submitVote
} = useVote();

const funFactToShow = ref('');
const canShowFunFact = ref(false);

onMounted(pickPhotosForNewVote);

watch(userReachedTriviaMilestone, (valueIsTrue) => {
  if (!valueIsTrue) return;

  const availableFunFactIndexes = [...Array(funFacts.length).keys()].filter(
    (index) => !shownFactIndexes.value.includes(index)
  );
  const funFactIndex = randomNumber(0, availableFunFactIndexes.length - 1);

  funFactToShow.value = funFacts[funFactIndex];
  shownFactIndexes.value.push(funFactIndex);
  canShowFunFact.value = true;
});
</script>

<template>
  <section class="w-100 h-100 d-flex flex-column justify-center align-center">
    <div class="text-center">
      <template v-if="userSubmittedAllVotes">
        <h1 class="mb-md-5 mb-2 text-md-h2 text-h4">Congratulations!</h1>
        <p class="mb-md-6 mb-4 px-6 text-md-h5 text-body-1 font-weight-regular">
          You've submitted all votes. Check out the results by clicking the
          button below.
        </p>
        <v-btn size="large" to="/ranking">Show ranking</v-btn>
      </template>
      <template v-else-if="userReachedTriviaMilestone && canShowFunFact">
        <h1 class="mb-2 text-h3">Trivia pit stop</h1>
        <div class="mt-3 mb-8 px-12">
          <p class="text-h6 mb-6 font-weight-regular">
            You're doing great! While we have a quick pit stop to keep you
            running smoothly, enjoy this random bit of trivia.
          </p>
          <p class="w-50 mx-auto my-0 text-h6 font-italic">
            {{ funFactToShow }}
          </p>
        </div>
        <v-btn @click="canShowFunFact = false">Continue</v-btn>
      </template>
      <template v-else>
        <h1 class="mt-4 mb-2 text-h3">Vote</h1>
        <p class="px-4 mb-5 text-h6 font-weight-regular">
          Which photo do you like more? Click one of three buttons below to
          choose.
        </p>
        <div class="w-100 px-4">
          <v-progress-linear
            class="px-6"
            color="primary"
            height="20"
            :model-value="completionPercentage"
          >
            <template v-slot:default="{ value }">
              <strong>{{ value.toFixed(2) }}%</strong>
            </template>
          </v-progress-linear>
        </div>
        <div
          class="py-lg-6 py-3 d-flex flex-lg-row flex-lg-row flex-column align-center"
        >
          <div
            v-for="(photo, index) in photosInCurrentVote"
            :key="photo.fileName"
            class="d-flex flex-column align-center px-5 py-4"
          >
            <v-img
              :src="`/images/${photo.fileName}`"
              lazy-src="data:image/png;base64,[encoded data, 7868 characters]"
              :alt="`Photo ${index + 1} - ${photo.altText}`"
              :aspect-ratio="16 / 9"
              max-width="480"
              max-height="270"
            />
            <p class="mt-2 text-h6">Photo {{ index + 1 }}</p>
          </div>
        </div>
        <div id="vote-btns" class="mb-4 d-flex justify-center flex-wrap">
          <v-btn size="large" @click="submitVote(1)">Photo 1</v-btn>
          <v-btn size="large" @click="submitVote(0)">Photo 2</v-btn>
          <v-btn size="large" @click="submitVote(0.5)">I can't decide</v-btn>
        </div>
      </template>
    </div>
  </section>
</template>

<style scoped>
#vote-btns {
  gap: 1.25rem;
}
</style>
