<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}/profile/verify-email`);
const token = ref(route.params.token);

async function fetchCheckVerifEemail() {
  showLoader();
  await axios
    .post(
      pathApi.value,
      { token: token.value },
      {
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        },
      }
    )
    .then(() => {})
    .catch((err) => {
      // messageError($q, err);
    })
    .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 class="card">
      <!-- <div class="header"> -->
      <q-icon name="mdi-check-decagram" color="blue" size="64px" />
      <div class="text-h4 text-primary q-mt-md">Verify Your Email</div>
      <!-- <div class="text-subtitle2 text-grey-7 q-mt-xs">
          Please check your inbox to confirm your email address.
        </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>
