<template>
  <UCollapsible
    class="flex flex-col gap-2 relative"
    :ui="{
      root: 'relative',
      content:
        'absolute z-50 w-auto ring-0 left-1/2 top-12 transform -translate-x-1/2 p-0 m-0 border-none',
    }"
  >
    <UButton
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide-chevron-down"
      class="bg-bg-light dark:bg-bg-dark m-0 ring-0 text-xl font-medium uppercase cursor-pointer hover:bg-inherit text-text-light dark:text-text-dark"
      block
      @click="isOpen = !isOpen"
    >
      {{ selectedCountry }}/{{ selectedCurrency }}
    </UButton>

    <template #content v-if="isOpen" class="">
      <div
        class="border border-button px-4 py-[10px] rounded-[5px] bg-bg-light dark:bg-bg-dark"
      >
        <div class="p-0 flex flex-col gap-4 bg-bg-light dark:bg-bg-dark">
          <div class="flex flex-col items-start gap-1">
            <p>{{ $t("lang") }}</p>
            <USelect
              v-model="selectedCountry"
              :items="menuStore.countryList"
              class="w-32"
              value-key="iso_code"
              :ui="{
                base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
                viewport: 'ring-0',
                content: 'bg-bg-light dark:bg-bg-dark border border-button',
                leading: 'p-0',
                item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
              }"
            >
              <template #leading="{ modelValue }">
                <div
                  class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
                >
                  {{ modelValue }}
                </div>
              </template>

              <template
                #item="{ item }"
                class="bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 !border !border-button"
              >
                <div class="flex items-center gap-2 cursor-pointer w-full">
                  <p class="text-base text-text-light dark:text-text-dark">
                    {{ item?.name }}
                  </p>
                </div>
              </template>
            </USelect>
          </div>
          <div class="flex flex-col items-start gap-[6px]">
            <p>{{ $t("currency") }}</p>
            <USelect
              v-model="selectedCurrency"
              :items="menuStore.currencies"
              class="w-32"
              value-key="iso_code"
              :ui="{
                base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
                viewport: 'ring-0',
                content: 'bg-bg-light dark:bg-bg-dark border border-button',
                leading: 'p-0',
                item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
              }"
            >
              <template #leading="{ modelValue }">
                <div
                  class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
                >
                  {{ modelValue }}
                </div>
              </template>

              <template
                #item="{ item }"
                class="bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 !border !border-button"
              >
                <div class="flex items-center gap-2 cursor-pointer w-full">
                  <p class="text-base text-text-light dark:text-text-dark">
                    {{ item?.name }}
                  </p>
                </div>
              </template>
            </USelect>
          </div>
        </div>
      </div>
    </template>
  </UCollapsible>
</template>

<script setup lang="ts">
const isOpen = ref(false);
const menuStore = useMenuStore();

const selectedCountry = ref();
const selectedCurrency = ref();

watchEffect(() => {
  if (
    !selectedCountry.value &&
    menuStore.countryList &&
    menuStore.countryList.length > 0
  ) {
    selectedCountry.value = menuStore.countryList[0].iso_code;
  }
  if (
    !selectedCurrency.value &&
    menuStore.currencies &&
    menuStore.currencies.length > 0
  ) {
    selectedCurrency.value = menuStore.currencies[0].iso_code;
  }
});
</script>
