<script
    setup
    lang="ts"
>
    import { dark_mode_options } from 'src/modules/profile/models/preferences.models';
    import LanguageSwitch from 'src/modules/shared/components/language-switch.vue';

    import { useUiStore } from 'src/stores/ui-store';

    const ui_store = useUiStore();
</script>

<template>
    <div class="q-px-md column no-wrap">
        <div style="transform: translate(10px, 12px);">
            <span class="text-uppercase text-weight-bold text-accent bg-dark q-px-sm">
                {{ $t('profile.preferences.display_options') }}
            </span>
        </div>

        <div
            class="col-auto justify-center content-center q-mb-sm q-pa-md rounded-5"
            :class="ui_store.is_mobile_mode ? 'column' : 'row'"
            style="border: 1px solid var(--q-accent);"
        >
            <q-item
                v-for="mode of dark_mode_options"
                :key="mode.label"
                clickable
                dense
                v-ripple
                class="col row rounded-5 q-ma-sm shadow-4"
                :class="(mode.quasar_value === $q.dark.mode ? 'bg-accent text-white text-weight-bolder' : '') + ($q.platform.is.mobile ? ' full-width q-py-xs' : '')"
                @click="ui_store.user_preferences.is_dark_mode = mode.value"
            >
                <q-item-section avatar>
                    <q-icon
                        :name="mode.icon"
                        size="md"
                        :color="mode.quasar_value === $q.dark.mode ? 'white' : ''"
                    />
                </q-item-section>

                <q-item-section class="text-uppercase justify-center">
                    <q-item-label> {{ $t(mode.label) }}</q-item-label>
                </q-item-section>

                <q-item-section side>
                    <q-icon
                        v-if="mode.quasar_value === $q.dark.mode"
                        name="check"
                        color="white"
                    />
                </q-item-section>
            </q-item>
        </div>

        <div
            class="col-auto row text-uppercase text-weight-bold text-accent"
            style="transform: translate(10px, 12px);"
        >
            <div class="col-auto bg-dark q-px-sm">{{ $t('profile.preferences.language_options') }}</div>
        </div>
        <div
            class="col-auto justify-center content-center q-pa-sm rounded-5"
            style="border: 1px solid var(--q-accent);"
        >
            <LanguageSwitch class="col-auto" />
        </div>
    </div>
</template>