<template>
  <pn-page-template>
    <template #title>
      {{ $t('settings__title') }}
    </template>
    <q-list>
      <q-item-label header class="q-pt-none">
        {{ $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>

      <pn-item-btm-dialog
        title="settings__display_mode"
        caption="settings__display_mode_only_mobile"
        icon="mdi-overscan"
        iconColor="primary"
        >
        <template #value>
          {{ $t(displayModeLabel) }}
        </template>
        <pn-list-selector
          v-model="displayMode"
          :options="displayModeOptions"
        />
        <q-banner
          v-if="$isAndroid"
          class="bg-negative text-white q-mt-lg"
          >
          <template #avatar>
            <q-icon name="mdi-alert-circle-outline"/>
          </template>
          {{ $t('settings__display_mode_android_warning') }}
        </q-banner>
      </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-page-template>
</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 displayMode = ref<'full' | 'window'>('window')
  const displayModeOptions = [
    { value: 'full', label: 'settings__display_mode_full' },
    { value: 'window', label: 'settings__display_mode_window' }
  ]
  const displayModeLabel = computed(() =>
    displayModeOptions.find(el => el.value === displayMode.value)?.label ?? ''
  )
  
  watch(displayMode, async (newValue) => {
    await settingsStore.updateSettings({ displayMode: 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
    fontSize.value = settingsStore.settings.fontSize
    displayMode.value = settingsStore.settings.displayMode
    timeZoneBot.value = settingsStore.settings.timeZoneBot
    localeBot.value = settingsStore.settings.localeBot
  })

</script>

<style scoped>
</style>
