<script setup>
import { Dark, Quasar } from 'quasar';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n();

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

        if (value === 'en') value = 'en-GB';

        // FIXME: Dynamic imports from absolute paths are not compatible with vite:
        // https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
        try {
            const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs');
            langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
                Quasar.lang.set(lang.default);
            });
        } catch (error) {
            //
        }
    },
});

const darkMode = computed({
    get() {
        return Dark.isActive;
    },
    set(value) {
        Dark.set(value);
    },
});
const langs = ['en', 'es'];
</script>

<template>
    <QLayout view="hHh LpR fFf">
        <QHeader reveal class="bg-vn-dark">
            <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>
