<script setup lang="ts">
import { onMounted, ref } from "vue";
import axios from "axios";
import { useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import env from "@/api/index";

const $q = useQuasar();
const route = useRoute();
const { showLoader, hideLoader, messageError } = useCounterMixin();

const pathApi = ref<string>(`${env.API_URI}/org/unauthorize/verify-email`);
const token = ref(route.query.upn);
const isCheckEmail = ref<boolean>(false);

async function fetchCheckVerifEemail() {
  if (!token.value) {
    return false;
  }

  showLoader();
  await axios
    .post(pathApi.value, { token: token.value })
    .then(() => {
      isCheckEmail.value = true;
    })
    .catch((err) => {
      // messageError($q, err);
      isCheckEmail.value = false;
    })
    .finally(() => {
      hideLoader();
    });
}

onMounted(() => {
  fetchCheckVerifEemail();
});
</script>

<template>
  <div
    class="bg-light text-center q-pa-md flex flex-center"
    style="
      height: 90vh;
      background: linear-gradient(to bottom, #e0f7fa, #ffffff);
    "
  >
    <div>
      <!-- <div class="header"> -->
      <q-icon
        :name="isCheckEmail ? 'mdi-check-decagram' : 'mdi-alert-decagram'"
        :color="isCheckEmail ? 'blue' : 'warning'"
        size="64px"
      />
      <div v-if="isCheckEmail">
        <div class="text-h4 text-primary q-mt-md">Verify Your Email</div>
        <div class="text-subtitle2 text-grey-7 q-mt-xs">
          Your email address has been successfully verified. Thank you!
        </div>
      </div>
      <div v-else>
        <div class="text-h4 text-negative q-mt-md">
          Email Verification Failed
        </div>
        <div class="text-subtitle2 text-grey-7 q-mt-xs">
          Something went wrong. Please try again or contact support.
        </div>
      </div>
      <!-- </div> -->

      <q-btn
        class="q-mt-xl"
        color="primary"
        text-color="white"
        to="/"
        label="กลับหน้าหลัก"
        no-caps
        rounded
        size="lg"
      />
    </div>
  </div>
</template>

<style scoped></style>
