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

        <template v-if="authStore.isAuth">
          <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"
            v-if="timeZoneBot"
            >
            <template #value>
              {{ timeZoneBot.tz }}
              {{ timeZoneBot.offsetString }}
            </template>

            <pn-time-zone-selector
              v-model="timeZoneBot"
              :locale
            />
          </pn-item-btm-dialog>
        </template>
      </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 { useAuthStore } from 'stores/auth'
  import pnItemBtmDialog from 'components/pnItemBtmDialog.vue'
  import pnListSelector from 'components/pnListSelector.vue'
  import pnTimeZoneSelector from 'components/pnTimeZoneSelector.vue'

  const settingsStore = useSettingsStore()
  const authStore = useAuthStore()

  const localeOptions = settingsStore.supportLocale

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

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

  const fontSize = ref(16)
  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,offsetString: string }>()

  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>
