<script setup>
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';

import VnLogo from 'components/ui/VnLogo.vue';
import axios from 'axios';

const route = useRoute();

const { t } = useI18n();

const redirectButtons = ref([]);

onMounted(async () => {
    const params = route?.query;
    const { data } = await axios.get(`Urls/${params.userId}/get-by-user`);

    redirectButtons.value.push({
        color: 'bg-vnColor',
        icon: new URL(`../../assets/vn_icon.svg`, import.meta.url).href,
        text: 'goToShop',
        url: data.find((url) => url.appName == 'hedera').url,
    });

    const urls = data.filter((url) => url.appName != 'hedera');
    if (urls.length) {
        for (const url of urls) {
            redirectButtons.value.push({
                color: 'bg-primary',
                icon: new URL(`../../assets/${url.appName}_icon.svg`, import.meta.url)
                    .href,
                text: 'logIn',
                url: url.url,
            });
        }
    }
});
</script>

<template>
    <div class="q-gutter-y-xl q-pa-lg formCard flex flex-center">
        <VnLogo
            logo="vn"
            alt="Logo"
            fit="fill"
            class="q-px-xl q-py-md q-mb-xl logoWidth"
        />
        <div class="text-h4 vnColor text-center text-weight-medium">
            {{ t('verifyEmail') }}
        </div>
        <div class="q-gutter-md flex flex-center">
            <QBtn
                :class="button.color"
                v-for="button of redirectButtons"
                :key="button.id"
                :href="button.url"
            >
                <div class="row items-center no-wrap q-gutter-md">
                    <div class="circle q-pa-sm" style="background-color: var(--vn-gray)">
                        <QImg :src="button.icon" class="q-pa-md" />
                    </div>
                    <div class="text-h5" style="color: var(--vn-gray)">
                        {{ t(button.text) }}
                    </div>
                </div>
            </QBtn>
        </div>
    </div>
</template>
<i18n>
    {
        "en": {
            "verifyEmail": "Your email has been successfully verified. You can now log in to enjoy all the features of our platform.",
            "goToShop": "Go to the shop",
            "logIn": "Log In"
        },
        "es": {
            "verifyEmail": "Su correo electrónico ha sido verificado con éxito. Ahora puede iniciar sesión para disfrutar de todas las funcionalidades de nuestra plataforma.",
            "goToShop": "Ir a la tienda",
            "logIn": "Iniciar sesión"
        },
        "fr": {
            "verifyEmail": "Votre courrier électronique a été vérifié avec succès. Vous pouvez maintenant vous connecter pour profiter de toutes les fonctionnalités de notre plateforme.",
            "goToShop": "Aller à la boutique",
            "logIn": "Se connecter"
        },
        "pt": {
            "verifyEmail": "Seu e-mail foi verificado com sucesso. Agora você pode fazer o login para aproveitar todas as funcionalidades da nossa plataforma.",
            "goToShop": "Ir para a loja",
            "logIn": "Fazer login"
        },
        "it": {
            "verifyEmail": "La tua email è stata verificata con successo. Ora puoi accedere per godere di tutte le funzionalità della nostra piattaforma.",
            "goToShop": "Vai al negozio",
            "logIn": "Accedi"
        }
    }
</i18n>

<style lang="scss">
.formCard {
    max-width: 1500px;
    min-width: 700px;
}

@media (max-width: $breakpoint-xs-max) {
    .formCard {
        min-width: 100%;
    }
}
.vnColor {
    color: $vnColor;
}
.bg-vnColor {
    background-color: $vnColor;
}
.circle {
    border-radius: 50%;
}
.logoWidth {
    width: 50%;
}
</style>
