<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);"
        >
            <div
                v-for="mode of dark_mode_options"
                :key="mode.label"
                class="col q-pa-sm"
            >
                <q-item
                    clickable
                    dense
                    v-ripple
                    class="rounded-5 shadow-4 q-py-xs"
                    :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 side>
                        <q-icon
                            :name="mode.icon"
                            size="md"
                            :color="mode.quasar_value === $q.dark.mode ? 'white' : ''"
                        />
                    </q-item-section>

                    <q-item-section>
                        <q-item-label class="text-uppercase justify-center">{{ $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>

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