<template>
  <div class="flex flex-col">
    <p class="text-sm">Country/Currency:</p>
    <USelectMenu v-model="country" :items="countries"
      class="w-44 bg-(--main-light) dark:bg-(--black) rounded-md hover:none! text-sm!" valueKey="id"
      :searchInput="false">
      <template #default="{ modelValue }">
        <div class="flex items-center gap-1">
          <span class="font-medium dark:text-white text-black whitespace-nowrap">{{ modelValue.name }} / {{
            currentCountry?.ps_currency.iso_code }}</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>
  </div>
</template>

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

const cookie = useCookie()

const country = computed({
  get() {
    return currentCountry.value
  },
  set(value: string) {
    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' })

    switchLocalization()
  },
})

watch(
  () => country,
  (newCountry) => {
    if (newCountry) {
      currentCountry.value = countries.find((x) => x.id == Number(newCountry.value?.id))
    }
  },
  { immediate: true },
)
</script>
