<template>
  <p>Country: {{ currentCountry?.name }}</p>
  <p>Currency: {{ currentCountry?.ps_currency.iso_code }}</p>
  <USelectMenu v-model="country" :items="countries"
    class="w-40 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm  hover:none!" valueKey="id"
    :searchInput="false">
    <template #default="{ modelValue }">
      <div class="flex items-center gap-1">
        <span class="font-medium dark:text-white text-black">{{ modelValue.name }}</span>
      </div>
    </template>
    <template #item-leading="{ item }">
      <div class="flex items-center rounded-md cursor-pointer transition-colors">
        <span class="ml-2 dark:text-white text-black font-medium">{{ item.name }}</span>
      </div>
    </template>
  </USelectMenu>
</template>

<script setup lang="ts">
import { countries, currentCountry } from '@/router/langs'
import { useRouter, useRoute } from 'vue-router'
import { useCookie } from '@/composable/useCookie'
import { computed, watch } from 'vue'
import { i18n } from '@/plugins/02_i18n'
import { useFetchJson } from '@/composable/useFetchJson'
const router = useRouter()
const route = useRoute()

const cookie = useCookie()

const country = computed({
  get() {
    return currentCountry.value
  },
  set(value: string) {
    // i18n.locale.value = value
    currentCountry.value = countries.find((x) => x.id == Number(value))
    cookie.setCookie('country_id', `${countries.find((x) => x.id == Number(value))?.id}`, { days: 60, secure: true, sameSite: 'Lax' })

    // changeLang()
  },
})

// async function changeLang() {
//   try {
//     const { items } = await useFetchJson('/api/v1/public/auth/update-choice', {
//       method: 'POST'
//     })

//   } catch (error) {
//     console.log(error)
//   }
// }

watch(
  () => country,
  (newCountry) => {
    if (newCountry) {
      console.log(newCountry.value);

      // i18n.locale.value = newLocale  
      currentCountry.value = countries.find((x) => x.id == Number(newCountry.value?.id))
    }
  },
  { immediate: true },
)
</script>
