<script setup lang="ts">
    import { ref } from 'vue';
    import { Dark } from 'quasar';
    import LanguageSwitch from 'src/modules/shared/components/language-switch.vue';

    const initial_dark_mode_value = Dark.isActive;
    const is_dark_mode = ref<boolean>(initial_dark_mode_value);

    const toggle_dark_mode = (value: boolean) => {
        is_dark_mode.value = value;
        Dark.set(value);
    }
</script>

<template>
    <q-form class="q-pa-md column fit">
        <div class="col-auto text-uppercase rounded-5" style="line-height: 1em;">{{ $t('profile.preferences.display_options') }}</div>
        <q-card 
            flat
            class="col-auto column justify-center items-center content-center q-mb-lg q-pa-md" 
            style="border: solid #AAA 1px;"
        >

            <div class="row col">
                <q-card flat class="col column q-pa-xs bg-white" style="border: solid 1px var(--q-primary);">
                    <div 
                        class="col-auto column rounded-4 ellipsis" 
                        style="height: 90px; min-width: 80px; background-color: #DAE0E7;"
                    >
                        <div class="bg-primary col-1"></div>
                        <div class=" row col">
                            <div class="col-8 q-ma-xs rounded-borders" style="background-color: white;"></div>
                            <div class="col column q-gutter-xs q-py-xs q-pr-xs">
                                <div class="col rounded-borders" style="background-color: white;"></div>
                                <div class="col rounded-borders" style="background-color: white;"></div>
                                <div class="col rounded-borders" style="background-color: white;"></div>
                            </div>
                        </div>
                        <div class="bg-primary col-1"></div>
                    </div>
                    <span class="col-auto text-subtitle2 text-primary text-center text-uppercase">{{$t('profile.preferences.light_mode')}}</span>
                </q-card>

                <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"
                />

                <q-card flat class="col column q-pa-xs bg-white" style="border: solid 1px var(--q-primary);">
                    <div 
                        class="col-auto column rounded-4 ellipsis" 
                        style="height: 90px; min-width: 80px; background-color: #0f1114;"
                    >
                        <div class="bg-primary col-1"></div>
                        <div class=" row col">
                            <div class="col-8 q-ma-xs rounded-borders" style="background-color: #333;"></div>
                            <div class="col column q-gutter-xs q-py-xs q-pr-xs">
                                <div class="col rounded-borders" style="background-color: #333;"></div>
                                <div class="col rounded-borders" style="background-color: #333;"></div>
                                <div class="col rounded-borders" style="background-color: #333;"></div>
                            </div>
                        </div>
                        <div class="bg-primary col-1"></div>
                    </div>
                    <span class="col-auto text-subtitle2 text-primary text-center text-uppercase">{{$t('profile.preferences.dark_mode')}}</span>
                </q-card>
            </div>
        </q-card>

        <div class="col-auto text-uppercase rounded-5" style="line-height: 1em;">{{ $t('profile.preferences.language_options') }}</div>
        <q-card 
            flat
            class="col-auto column justify-center items-center content-center q-mb-lg q-pa-md" 
            style="border: solid #AAA 1px;"
        >
            
            <LanguageSwitch class="q-mr-xs col-auto" />
        </q-card>
    </q-form>
</template>