<script setup lang="ts">
import ResultModal from '~/components/ResultModal.vue';

definePageMeta({ middleware: ['result'] });

const examStore = useExamStore();

const points = ref<number>(0);

examStore.result.basic.forEach((answer) => {
  if (answer.chosen_is_correct) {
    points.value += answer.question?.weight ?? 0;
  }
});
examStore.result.advanced.forEach((answer) => {
  if (answer.chosen_is_correct) {
    points.value += answer.question?.weight ?? 0;
  }
});

const resultTrueFalse = ref(points.value >= 68 ? 'pozytywny' : 'negatywny');

useHead({
  title: `${
    String(resultTrueFalse.value[0]).toUpperCase() +
    String(resultTrueFalse.value).slice(1)
  } (${points.value}/74)`,
});

const countBasic = ref(0);
const countAdvanced = ref(0);

const resultQuestionBasic = computed<ResultType<BasicQuestion> | undefined>(
  () => examStore.result.basic.at(countBasic.value),
);
const resultQuestionAdvanced = computed<
  ResultType<AdvancedQuestion> | undefined
>(() => examStore.result.advanced.at(countAdvanced.value));

const questionBasic = computed<BasicQuestion | undefined>(
  () => resultQuestionBasic.value?.question,
);
const questionAdvanced = computed<AdvancedQuestion | undefined>(
  () => resultQuestionAdvanced.value?.question,
);

const now = ref('basic');

const question = computed(() => {
  if (now.value === 'basic') {
    return questionBasic.value;
  } else if (now.value === 'advanced') {
    return questionAdvanced.value;
  } else {
    return null;
  }
});

const resultQuestion = computed(() => {
  if (now.value === 'basic') {
    return resultQuestionBasic.value;
  } else if (now.value === 'advanced') {
    return resultQuestionAdvanced.value;
  } else {
    return null;
  }
});

const answer = computed(() => resultQuestion.value?.chosen_answer);

function changeNow(to: string) {
  now.value = to;
}

function changeCount(num: number) {
  if (now.value === 'basic') {
    countBasic.value = num;
  } else if (now.value === 'advanced') {
    countAdvanced.value = num;
  }
}
</script>

<template>
  <div>
    <ResultModal>
      <template #title>Egzamin teorytyczny</template>
      <template #category>{{ examStore.category }}</template>
      <template #points>{{ points }}</template>
      <template #resultTrueFalse>{{ resultTrueFalse }}</template>
    </ResultModal>
    <div>
      <div class="grid grid-cols-4 min-h-dvh">
        <div class="col-span-3 flex flex-col gap-4">
          <BarTop :points="question?.weight" :category="examStore.category" />
          <Media :media="question?.media_url" />
          <QuestionBasic
            v-if="now === 'basic'"
            v-model="answer"
            :question="questionBasic"
            class="select-none z-[-1]"
          />
          <QuestionAdvanced
            v-else-if="now === 'advanced'"
            v-model="answer"
            :question="questionAdvanced"
            class="select-none z-[-1]"
          />
        </div>

        <BarRightResult
          :result="examStore.result"
          :count-basic="countBasic"
          :count-advanced="countAdvanced"
          :now="now"
          @change-now="changeNow"
          @change-count="changeCount"
        >
          <template #points>{{ points }}</template>
          <template #resultTrueFalse>{{ resultTrueFalse }}</template>
        </BarRightResult>
      </div>
    </div>
  </div>
</template>
