<script setup>
    import logo from "@images/logo.png"

    const { setAlert } = useAlert()
    const router = useRouter();
    console.log(router.currentRoute.value.query)
    const email = ref(router.currentRoute.value.query.mail);

    if (!email.value) {
        router.push('/');
    }

    const loading = ref(false);

    const unsubscribe = async () => {
        if (!email.value) {
            router.push('/');
            return;
        }

        try {
            const res = await $api('/vagas/unsubscribe-email-vagas', {
                method: 'PUT',
                body: { email: email.value },
            });

            if (!res) return

            setAlert('Email descadastrado com sucesso!', 'success', 'tabler-check', 5000);
        } catch (error) {
            setAlert(error?.response?._data?.message || 'Ocorreu um erro ao descadastrar o email. Tente novamente!', 'error', 'tabler-alert-triangle', 5000);
        } finally {
            loading.value = false;
        }
    };
</script>
<template>
    <div class="w-100 h-screen d-flex justify-center align-center">
        <div class="text-center">
            <VImg :src="logo" width="100px" class="mb-4 mx-auto cursor-pointer" cover @click="router.push('/')" />
            <h2 class="mb-4 text-primary text-h3">Descadastrar email</h2>
            <p class="mb-8">Você tem certeza que deseja descadastrar o seu email <strong>{{ email }}</strong><br>
                e parar de receber notificações de candidaturas de vagas que você esteja cadastrado no AkkiPerto?</p>

            <div class="d-flex flex-md-row flex-column gap-3 align-center justify-center">
                <VBtn @click="unsubscribe" :loading="loading" color="error" variant="outlined">Descadastrar</VBtn>
                <VBtn @click="router.push('/')" color="primary">Não</VBtn>
            </div>
        </div>
    </div>
</template>