<template>
  <!--      <UiSelect id="locale" label="" :model-value="currentLocale" :options="localesOption" /> -->
  <!--      <UiSelect id="timezone" v-model="currentTimeZone" label="" class="w-50" searchable :options="['(GMT+03.00) Москва, Россия']" /> -->
  <PageBlock title="Time and language">
    <SettingsProperty icon="language" title="Language">
      <UiDropdown placement="bottom">
        <UiButton
          right-icon="chevron-down"
          type="outlined"
          size="large"
          color="secondary"
          style="text-transform: capitalize"
        >
          {{ currentLocale }}
        </UiButton>

        <template #dropdown>
          <UiDropdownItem
            v-for="locale in locales"
            :key="locale.code"
            :active="currentLocale === locale.code"
            @click="setLocale(locale.code)"
          >
            {{ locale.name }}
          </UiDropdownItem>
        </template>
      </UiDropdown>
    </SettingsProperty>
    <SettingsProperty icon="clock" title="Time zone" text="It is used to process transactions, track balances, and create reports.">
      <UiDropdown placement="bottom">
        <UiButton
          right-icon="chevron-down"
          type="outlined"
          size="large"
          color="secondary"
          style="text-transform: capitalize"
        >
          {{ currentTimeZone }}
        </UiButton>

        <template #dropdown>
          <UiDropdownItem
            v-for="timezone in ['(GMT+03.00) Москва, Россия']"
            :key="timezone"
            :active="currentLocale === timezone"
          >
            {{ timezone }}
          </UiDropdownItem>
        </template>
      </UiDropdown>
    </SettingsProperty>
  </PageBlock>
</template>

<script setup>
const { locale: currentLocale, locales, setLocale } = useI18n()

const currentTimeZone = '(GMT+03.00) Москва, Россия'
</script>

<style lang="scss">
</style>
