<script setup lang="ts">
import { ModalsContainer, useModal } from "vue-final-modal";
import ResultModal from "~/components/ResultModal.vue";

definePageMeta({
  layout: "exam",
});

const examStore = useExamStore();

const points = ref<number>(0);

if (!examStore.end) {
  examStore.resetExam();
  await navigateTo("/");
} else {
  examStore.result.basic.forEach((answer) => {
    if (answer.chosen_is_correct) {
      points.value += answer.question?.liczba_pkt ?? 0;
    }
  });
  examStore.result.advanced.forEach((answer) => {
    if (answer.chosen_is_correct) {
      points.value += answer.question?.liczba_pkt ?? 0;
    }
  });
}

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

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;
  }
});

const tak_nie_model = computed(() =>
  resultQuestionBasic.value?.chosen_answer.toLowerCase()
);
const abc_model = computed(() =>
  resultQuestionAdvanced.value?.chosen_answer.toLowerCase()
);

const media = computed(() => {
  const mediaSplit = question.value?.media?.split(".");
  return {
    fileType: mediaSplit?.pop()?.toLowerCase(),
    fileName: mediaSplit?.join("."),
    ogName: question.value?.media,
  };
});

const { open, close } = useModal({
  component: ResultModal,
  attrs: {
    title: "Egzamin teorytyczny",
    onClose() {
      close();
    },
    onHomepage() {
      return navigateTo("/");
    },
    onNewExam() {
      return navigateTo("/exam");
    },
  },
  slots: {
    points: `${points.value}`,
    resultTrueFalse: resultTrueFalse,
  },
});
open();

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;
  }
}

function nav(route: string) {
  return navigateTo(route);
}
</script>

<template>
  <div>
    <ModalsContainer />
    <div>
      <div class="grid grid-cols-4 min-h-dvh">
        <div class="col-span-3 flex flex-col gap-4">
          <TopBar :points="question?.liczba_pkt" :category="`B`" />
          <Media :media="media" />
          <BasicQuestionBlock
            v-if="now == 'basic'"
            :question="questionBasic"
            v-model="tak_nie_model"
            class="select-none z-[-1]"
          />
          <AdvancedQuestionBlock
            v-else-if="now == 'advanced'"
            :question="questionAdvanced"
            v-model="abc_model"
            class="select-none z-[-1]"
          />
        </div>

        <RightBarResult
          :result="examStore.result"
          :question="question"
          :question-basic="questionBasic"
          :question-advanced="questionAdvanced"
          :count-basic="countBasic"
          :count-advanced="countAdvanced"
          :now="now"
          @change-now="changeNow"
          @change-count="changeCount"
          @nav="nav"
        />
      </div>
    </div>
  </div>
</template>
