<script
    setup
    lang="ts"
>
    import LanguageSwitch from 'src/modules/shared/components/language-switch.vue';
    import { ref } from 'vue';
    import { Dark } from 'quasar';
    import { useUiStore } from 'src/stores/ui-store';
    const ui_store = useUiStore();
    const initial_dark_mode_value = Dark.isActive;
    const is_dark_mode = ref<boolean>(initial_dark_mode_value);
    
    const toggle_dark_mode = (value: boolean) => {
        if (ui_store.user_preferences) ui_store.user_preferences.is_dark_mode = value;
        Dark.set(value);
    }
    
</script>

<template>
    <q-form class="q-pa-md column fit">
        <q-card
            flat
            class="col-auto justify-center content-center q-mb-lg q-pa-none"
            :style="$q.dark.isActive ? 'background-color: #FFF1;' : 'background-color: #0001;'"
        >
            <q-card-section class="q-py-none">
                <span class="text-uppercase text-weight-bold text-accent">{{ $t('profile.preferences.display_options')
                }}</span>
            </q-card-section>

            <q-card-section
                horizontal
                class="flex-center text-uppercase"
            >
                <span class="q-mx-md text-weight-medium">{{ $t('profile.preferences.light_mode') }}</span>
                <q-toggle
                    v-model="is_dark_mode"
                    @update:model-value="value => toggle_dark_mode(value)"
                    size="xl"
                    class="col-auto"
                    checked-icon="dark_mode"
                    unchecked-icon="light_mode"
                />
                <span class="q-mx-md text-weight-medium">{{ $t('profile.preferences.dark_mode') }}</span>
            </q-card-section>
        </q-card>

        <q-card
            flat
            class="col-auto justify-center content-center q-mb-lg q-pa-none"
            :style="$q.dark.isActive ? 'background-color: #FFF1;' : 'background-color: #0001;'"
        >
            <q-card-section class="q-py-none">
                <span class="text-uppercase text-weight-bold text-accent">{{ $t('profile.preferences.language_options')
                }}</span>
            </q-card-section>

            <q-card-section
                horizontal
                class="flex-center"
            >
                <LanguageSwitch class="col-auto" />
            </q-card-section>
        </q-card>
    </q-form>
</template>