<script setup>
import { Dark, Quasar } from 'quasar';
import { computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { localeEquivalence } from 'src/i18n/index';
import quasarLang from 'src/utils/quasarLang';
import { langs } from 'src/boot/defaults/constants.js';

const { t, locale } = useI18n();
const userLocale = computed({
    get() {
        return locale.value;
    },
    set(value) {
        locale.value = value;

        value = localeEquivalence[value] ?? value;

        quasarLang(value);
    },
});

const darkMode = computed({
    get() {
        return Dark.isActive;
    },
    set(value) {
        Dark.set(value);
    },
});
</script>

<template>
    <QLayout view="hHh LpR fFf">
        <QHeader reveal class="bg-vn-section-color">
            <QToolbar class="justify-end">
                <QBtn
                    id="switchLanguage"
                    :label="t('globals.language')"
                    icon="translate"
                    color="primary"
                    size="sm"
                    flat
                    rounded
                >
                    <QMenu auto-close>
                        <QList dense v-for="lang in langs" :key="lang">
                            <QItem
                                @click="userLocale = lang"
                                :active="userLocale == lang"
                                v-ripple
                                clickable
                            >
                                {{ t(`globals.lang.${lang}`) }}
                            </QItem>
                        </QList>
                    </QMenu>
                </QBtn>
                <QList>
                    <QItem>
                        <QItemSection>
                            <QToggle
                                v-model="darkMode"
                                checked-icon="dark_mode"
                                unchecked-icon="light_mode"
                                :label="t(`globals.darkMode`)"
                            />
                        </QItemSection>
                    </QItem>
                </QList>
            </QToolbar>
        </QHeader>
        <QPageContainer>
            <QPage>
                <div class="form">
                    <QCard class="flex flex-center">
                        <RouterView></RouterView>
                    </QCard>
                </div>
            </QPage>
        </QPageContainer>
    </QLayout>
</template>

<style lang="scss" scoped>
.form {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: inherit;
    flex-direction: column;
}
</style>