<template>
  <UCollapsible
    v-model="isOpen"
    class="flex flex-col gap-2"
    :ui="{
      content: 'absolute top-20',
    }"
  >
    <UButton
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide-chevron-down"
      class="m-0 bg-bg-dark ring-0 text-xl font-medium uppercase cursor-pointer hover:bg-inherit"
      block
      @click="isOpen = !isOpen"
    >
      {{ selectedCountry }}/{{ selectedCurrency }}
    </UButton>

    <template #content>
      <div class="flex flex-col">
        <USelect
          v-model="selectedCountry"
          :items="menuStore.countryList"
          class="w-48"
          value-key="iso_code"
        >
          <template #leading="{ modelValue }">
            <div class="flex items-center gap-2 text-xl font-medium uppercase">
              {{ modelValue }}
            </div>
          </template>

          <template #item="{ item }">
            <div class="flex items-center gap-2 cursor-pointer w-full">
              <p class="text-xl font-medium">{{ item?.name }}</p>
            </div>
          </template>
        </USelect>
        <USelect
          v-model="selectedCurrency"
          :items="menuStore.currencies"
          class="w-48"
          value-key="iso_code"
        >
          <template #leading="{ modelValue }">
            <div class="flex items-center gap-2 text-xl font-medium uppercase">
              {{ modelValue }}
            </div>
          </template>

          <template #item="{ item }">
            <div class="flex items-center gap-2 cursor-pointer w-full">
              <p class="text-xl font-medium">{{ item?.name }}</p>
            </div>
          </template>
        </USelect>
      </div>
    </template>
  </UCollapsible>
</template>

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

const isOpen = ref(false);
const menuStore = useMenuStore();

const selectedCountry = ref(menuStore.countryList[0].iso_code);
const selectedCurrency = ref(menuStore.currencies[0].iso_code);
</script>
