<template>
    <q-menu>
        <div class="row no-wrap q-pa-md">
            <div class="column">
                <div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
                <q-toggle
                    :label="t(`globals.lang['${locale}']`)"
                    icon="public"
                    color="orange"
                    false-value="es"
                    true-value="en"
                    v-model="locale"
                />
                <q-toggle
                    v-model="darkMode"
                    checked-icon="dark_mode"
                    color="orange"
                    unchecked-icon="light_mode"
                />

                <q-btn color="orange" outline size="sm" label="Settings" icon="settings" />
            </div>

            <q-separator vertical inset class="q-mx-lg" />

            <div class="column items-center" style="min-width: 150px">
                <q-avatar size="80px">
                    <q-img
                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
                        spinner-color="white"
                    />
                </q-avatar>

                <div class="text-subtitle1 q-mt-md">
                    <strong>{{ user.nickname }}</strong>
                </div>
                <div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.username }}</div>

                <q-btn
                    color="orange"
                    flat
                    label="Log Out"
                    size="sm"
                    icon="logout"
                    @click="logout()"
                    v-close-popup
                />
            </div>
        </div>
    </q-menu>
</template>

<script lang="ts" setup>
import { onMounted, computed } from 'vue';
import { Dark, useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import axios from 'axios';

import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession';

const quasar = useQuasar();
const state = useState();
const session = useSession();
const router = useRouter();
const { t, locale } = useI18n();

const darkMode = computed({
    get(): boolean {
        return Dark.isActive;
    },
    set(value: boolean): void {
        Dark.set(value);
    },
});

const user = state.getUser();
const token = session.getToken();

onMounted(() => {
    axios
        .get('/api/accounts/acl')
        .then(({ data }) => {
            state.setUser({
                id: data.user.id,
                username: data.user.name,
                nickname: data.user.nickname,
            });
        })
        .catch(() => {
            quasar.notify({
                message: t('errors.statusUnauthorized'),
                type: 'negative',
            });
            logout();
        });
});

function logout(): void {
    session.destroy();
    router.push('/login');
}
</script>
