<script setup lang="ts">
import { ref, provide, onMounted } from 'vue'
import { useLoading } from 'vue-loading-overlay'
import { ModalsContainer, useModal } from 'vue-final-modal'
import { checkUser, checkBots, checkUserGuilds } from '@/utils/discord'

import AvatarModal from './components/AvatarModal.vue'

import type { Ref } from 'vue'
import type { APIUser, APIGuild } from 'discord-api-types/v10'


// État de l'utilisateur, des bots et de leur avatar
const user: Ref<APIUser | null> = ref(null)
const bots: Ref<APIUser[] | null> = ref([])
const guilds: Ref<APIGuild[] | null> = ref([])
const avatar = ref('/question-square-48.png')
const ready = ref(false)

provide('user', user) // Fournit l'utilisateur aux composants enfants
provide('bots', bots) // Fournit les bots aux composants enfants
provide('guilds', guilds) // Fournit les guilds aux composants enfants
provide('ready', ready) // Fournit l'état de préparation aux composants enfants

// Affiche un écran de chargement
const $loading = useLoading({ color: '#eee', opacity: 0 })

// Modèle du popup de l'avatar
const { open } = useModal({ component: AvatarModal })

// Cycle de vie
onMounted(async () => {
    const loader = $loading.show()
    user.value = await checkUser() // Vérifie l'authentification lors du montage du composant

    if (user.value) {
        avatar.value = `https://cdn.discordapp.com/avatars/${user.value.id}/${user.value.avatar}?size=48`
        bots.value = await checkBots() // Vérifie les bots
        guilds.value = await checkUserGuilds() // Vérifie les guilds de l'utilisateur
    }

    ready.value = true
    loader.hide()
})
</script>

<template>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet'>

    <header>
        <h1 class="vc" style="font-family: Roboto Condensed">MainFrame</h1>
        <div class="vl"></div>
        <nav class="vc">
            <router-link to="/">Index</router-link>
            <p>|</p>
            <router-link to="/discord/dashboard">Discord</router-link>
            <img class="rounded" @click="() => open()" :src=avatar>
        </nav>
    </header>

    <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
            <component :is="Component" />
        </transition>
    </router-view>

    <ModalsContainer />
</template>

<style scoped>
header {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    height: 60px;
    width: 100%;
    padding: 10px;
    background-color: #333;
    color: #fff;
}

header * {
    display: inline-block;
    vertical-align: middle;
}

nav {
    position: relative;
    right: 20px;
    font-size: 20px;
}

nav * {
    margin-left: 20px;
}

h1 {
    text-align: center;
    left: 0;
    width: 197px;
}

router-link {
    font-size: 100px;
}

.router-link-active {
    border-left: 0px;
    border-bottom: 2px solid hsla(160, 100%, 37%, 1);
}

.vc {
    position: absolute;
    margin: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.vl {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 200px;
    height: 100%;
    margin-left: -3px;
    border-left: 6px solid rgb(0, 255, 140);
}
</style>
