<template>
    <pn-page-card>
    <template #title>
      {{ $t('settings__title') }}
    </template>

    <pn-scroll-list>
      <q-list separator>
        <q-item-label header>{{ $t('settings__software_title') }}</q-item-label>

        <pn-item-btm-dialog
          title="settings__language"
          caption="settings__software_title"
          icon="mdi-translate"
          iconColor="primary"
          >
          <template #value>
            {{ localeOptions.find(el => el.value === locale)?.label }}
          </template>
          <pn-list-selector
            v-model="locale"
            :options="localeOptions"
          />
        </pn-item-btm-dialog>

        <pn-item-btm-dialog
          title="settings__font_size"
          caption="settings__software_title"
          icon="mdi-format-size"
          iconColor="primary"
          >
          <template #value>
            {{ $t(fontSizeLabel) }}
          </template>
          <pn-list-selector
            v-model="fontSize"
            :options="fontSizeOptions"
          />
        </pn-item-btm-dialog>

        <q-item-label class="q-mt-md" header>{{ $t('settings__bot_title') }}</q-item-label>

        <pn-item-btm-dialog
          title="settings__language"
          caption="settings__bot_title"
          icon="mdi-translate"
          iconColor="primary"
          >
          <template #value>
            {{ localeOptions.find(el => el.value === localeBot)?.label }}
          </template>
          <pn-list-selector
            v-model="localeBot"
            :options="localeOptions"
          />
        </pn-item-btm-dialog>
        <pn-item-btm-dialog
          title="settings__timezone"
          caption="settings__bot_title"
          icon="mdi-map-clock-outline"
          iconColor="primary"
          >
          <template #value>
            {{ timeZoneBot.tz }}
            {{ timeZoneBot.offsetString }}
          </template>

          <pn-time-zone-selector
            v-model="timeZoneBot"
            :locale
          />
        </pn-item-btm-dialog>
      </q-list>
    </pn-scroll-list>
  </pn-page-card>
</template>

<script setup lang="ts">
  import { ref, watch, computed, onMounted } from 'vue'
  import { useSettingsStore } from 'stores/settings'
  import pnItemBtmDialog from 'components/pnItemBtmDialog.vue'
  import pnListSelector from 'components/pnListSelector.vue'
  import pnTimeZoneSelector from 'components/pnTimeZoneSelector.vue'

  const settingsStore = useSettingsStore()

  const locale = ref('')
  const localeBot = ref('')
  const localeOptions = settingsStore.supportLocale

  watch(locale, async (newValue) => {
    await settingsStore.updateSettings({ locale: newValue })
  })

  watch(localeBot, async (newValue) => {
    await settingsStore.updateSettings({ localeBot: newValue })
  })

  const fontSize = ref(14)
  const fontSizeOptions = settingsStore.supportFontSizes
  const fontSizeLabel = computed(() =>
    fontSizeOptions.find(el => el.value === fontSize.value)?.label ?? ''
  )

  watch(fontSize, async (newValue) => {
    await settingsStore.updateSettings({ fontSize: newValue })
  })

  const timeZoneBot = ref<{ tz: string, offset: number }>({ tz: '', offset: 1 })

  watch(timeZoneBot, async (newValue) => {
    if (newValue) await settingsStore.updateSettings({ timeZoneBot: newValue })
  })
  
  onMounted(() => {
    locale.value = settingsStore.settings.locale
    localeBot.value = settingsStore.settings.localeBot
    fontSize.value = settingsStore.settings.fontSize
    timeZoneBot.value = settingsStore.settings.timeZoneBot
  })

</script>

<style scoped>
</style>
