<template>
    <div class="my-4 d-flex justify-content-center align-items-center container-activation">
        <div class="card shadow col-12 col-md-6">
            <div class="card-body">
                <div class="d-flex justify-content-center align-items-center flex-column py-3" v-if="is_loading">
                    <SharedLoader :width="40" :height="40" />
                    <h5 class="mt-4">Activando cuenta...</h5>
                </div>

                <div class="d-flex justify-content-center align-items-center flex-column py-3" v-if="!is_loading">
                    <div class="d-flex justify-content-center align-items-center flex-column" v-if="!show_success_sent">
                        <img :src="verified ? '/img/icons/success.webp' : '/img/icons/error.webp'" :alt="verified ? 'cuenta-creada-correctamente' : 'error-cuenta-no-creada-correctamente'" width="150" height="150" />
                        <h5 class="mt-4">{{ msg_verified }}</h5>
                        <button type="button" class="btn btn-primary" @click="resendEmailActivation();" v-if="show_resend_email">Enviar correo de activación</button>
                    </div>
                    <div class="d-flex justify-content-center align-items-center flex-column" v-if="show_success_sent">
                        <img :src="sent_email ? '/img/icons/success.webp' : '/img/icons/error.webp'" :alt="sent_email ? 'cuenta-creada-correctamente' : 'error-cuenta-no-creada-correctamente'" width="150" height="150" />
                        <h5 class="mt-4">{{ msg_sent }}</h5>
                        <button type="button" class="btn btn-primary" @click="resendEmailActivation();" v-if="show_resend_email && !sent_email">Enviar correo de activación</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useRegisterStore } from '../../pinia/auth/register/register.store';
const { activateAccount, sendEmailVerification } = useRegisterStore();
useSeoMeta({ title: "VectorGeenk - Activación de cuenta" });

const route = useRoute();
const token = route.params.token;

const is_loading = ref(true);
const verified = ref(false);
const msg_verified = ref('');
const show_resend_email = ref(false);

const show_success_sent = ref(false);
const sent_email = ref(false);
const msg_sent = ref('');

onMounted(async () => {
    const response = await activateAccount(token)
    is_loading.value = false;
    verified.value = response.status;
    msg_verified.value = response.msg;

    const errors = ['Token expirado'];

    if(errors.includes(response.msg)) {
        show_resend_email.value = true;
    }
})

const resendEmailActivation = async () => {
    const sent = await sendEmailVerification(token);
    show_success_sent.value = true;
    if(sent) {
        sent_email.value = true;
        msg_sent.value = "El email de activación se ha enviado correctamente.";
    } else {
        sent_email.value = false;
        msg_sent.value = "Hubo un error al enviar el correo de activación.";
    }

}


</script>
<style scoped lang="scss">
.container-activation {
    min-height: 500px;
}
</style>