<template>
    <pn-page-card>
    <template #title>
      <div class="flex items-center justify-between col-grow">
        <div>
          {{ $t('settings__title') }}
        </div>
      </div>
    </template>

    <pn-scroll-list>
      <q-list separator>
        <q-item>
          <q-item-section avatar>
            <q-avatar color="primary" rounded text-color="white" icon="mdi-translate" size="md" />
          </q-item-section>
          <q-item-section>
            <span>{{ $t('settings__language') }}</span>
          </q-item-section>
          <q-item-section>
            <q-select
              class="fix-input-right text-body1"
              v-model="locale"
              :options="localeOptions"
              dense
              borderless
              emit-value
              map-options
              hide-bottom-space
            />
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section avatar>
            <q-avatar color="primary" rounded text-color="white" icon="mdi-format-size" size="md" />
          </q-item-section>
          <q-item-section>
            <span>{{ $t('settings__font_size') }}</span>
          </q-item-section>
          <q-item-section>
            <div class="flex justify-end">
              <q-btn
              @click="textSizeStore.decreaseFontSize()"
                color="negative" flat
                icon="mdi-format-font-size-decrease"
                class="q-pa-sm q-mx-xs"
                :disable="currentTextSize <= minTextSize"
              />
              <q-btn
                @click="textSizeStore.increaseFontSize()"
                color="positive" flat
                icon="mdi-format-font-size-increase"
                class="q-pa-sm q-mx-xs"
                :disable="currentTextSize >= maxTextSize"
              />
            </div>
          </q-item-section>
        </q-item>
      </q-list>
    </pn-scroll-list>
  </pn-page-card>
</template>

<script setup lang="ts">
  import { useI18n } from 'vue-i18n'
  import { watch, ref } from 'vue'
  import { useTextSizeStore } from 'src/stores/textSize'

  const { locale } = useI18n()
  
  const savedLocale = localStorage.getItem('locale') || 'en-US'
  locale.value = savedLocale

  const localeOptions = ref([
    { value: 'en-US', label: 'English' },
    { value: 'ru-RU', label: 'Русский' }
  ])

  watch(locale, (newLocale) => {
    localStorage.setItem('locale', newLocale)
  })

  const textSizeStore = useTextSizeStore()
  const currentTextSize = textSizeStore.currentFontSize
  const maxTextSize = textSizeStore.maxFontSize 
  const minTextSize = textSizeStore.minFontSize
</script>

<style scoped>
 .fix-input-right :deep(.q-field__native) {
    justify-content: end;
  }
</style>
