<template>
    <pn-page-card>
    <template #title>
      {{ $t('settings__title') }}
    </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="settingsStore.decreaseFontSize()"
                color="negative" flat
                icon="mdi-format-font-size-decrease"
                class="q-pa-sm q-mx-xs"
                :disable="!settingsStore.canDecrease"
              />
              <q-btn
                @click="settingsStore.increaseFontSize()"
                color="positive" flat
                icon="mdi-format-font-size-increase"
                class="q-pa-sm q-mx-xs"
                :disable="!settingsStore.canIncrease"
              />
            </div>
          </q-item-section>
        </q-item>
      </q-list>
    </pn-scroll-list>
  </pn-page-card>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { useSettingsStore } from 'stores/settings'

  const settingsStore = useSettingsStore()

  const localeOptions = settingsStore.supportLocale

  const locale = computed({
    get: () => settingsStore.settings.locale,
    // eslint-disable-next-line @typescript-eslint/no-misused-promises
    set: (value: string) => settingsStore.updateLocale(value)
  })

</script>

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