<template>
  <USelect
    v-model="selectedLocaleCode"
    :items="locales"
    value-key="code"
    :searchable="false"
    :ui="{
      base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
      trailing: 'hidden',
      viewport: 'ring-0',
      content: 'bg-bg-light dark:bg-bg-dark w-auto ring-0 border border-button',
      leading:
        'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 pr-6',
      group: 'px-[5px] py-[10px]',
      item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
    }"
    @update:model-value="
      setLocale($event);
      $session.setLanguage($event);
      $session.loadSession();
    "
  >
    <template #leading="{ modelValue }">
      <div class="flex items-center gap-2 text-xl font-medium uppercase">
        {{ locales.find((item: any) => item.code === modelValue)?.code }}
      </div>
    </template>

    <template #item="{ item }">
      <div class="flex items-center gap-2 cursor-pointer w-full">
        <UIcon
          :name="item.icon as string"
          class="size-5 rounded-full border border-button/40"
        />
        <p
          class="text-xl font-medium uppercase text-text-light dark:text-text-dark opacity-100"
        >
          {{ item.code }}
        </p>
      </div>
    </template>
  </USelect>
</template>

<script setup lang="ts">
const { locale, locales, setLocale } = useI18n()
const { $session } = useNuxtApp()

const selectedLocaleCode = ref(locale.value)
</script>
