<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 p-0',
      group: 'px-[5px] py-[10px]',
      item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
    }"
    @update:model-value="setLocale"
  >
    <template #leading="{ modelValue }">
      <div class="flex items-center gap-2 text-xl font-medium">
        {{ locales.find((item) => item.code === modelValue)?.name }}
      </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">{{ item.name }}</p>
      </div>
    </template>
  </USelect>
</template>

<script setup lang="ts">
import { useI18n } from "#imports";

const { locale, locales, setLocale } = useI18n();

const selectedLocaleCode = ref(locale.value);
const selectedIcon = ref(
  locales.value.find((item) => item.code === locale.value)?.icon
);

watch(selectedLocaleCode, async (newCode) => {
  if (newCode !== locale.value) {
    await setLocale(newCode);
  }
});
</script>
