<template>
  <div ref="dropdownRef"
       class="flex flex-col gap-2 relative"
  >
    <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"
    >
      {{ $session.cookieData.value.country.iso_code }}/{{
        $session.cookieData.value.currency.iso_code
      }}
    </UButton>

    <div
      v-if="isOpen"
      class="absolute ring-0 top-12 p-0 m-0 border-none w-48 z-50"
    >
      <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("country") }}</p>
            <div
              class="w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1"
            >
              <div class="p-0"
                   @click="openDrop('country')"
              >
                <div
                  class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
                >
                  {{ $session.currentCountryIso }}
                  <span>
                    <i
                      class="uil uil-angle-down text-2xl font-light cursor-pointer"
                    /></span>
                </div>
              </div>

              <div
                v-if="dropCountry"
                class="bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]"
              >
                <div class="overflow-auto h-[200px] w-full">
                  <p
                    v-for="item in menuStore.countries"
                    :key="item.iso_code"
                    class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
                    @click="
                      () => {
                        $session.setCountry(item.iso_code);
                        $session.loadSession();
                        dropCountry = false;
                      }
                    "
                  >
                    {{ item?.name }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-col items-start gap-[6px]">
            <p>{{ $t("currency") }}</p>
            <div
              class="w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1"
            >
              <div class="p-0"
                   @click="openDrop()"
              >
                <div
                  class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark"
                >
                  {{ $session.currentCurrencyIso
                  }}<span>
                    <i
                      class="uil uil-angle-down text-2xl font-light cursor-pointer"
                    /></span>
                </div>
              </div>

              <div
                v-if="dropCurrency"
                class="bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]"
              >
                <div class="overflow-auto w-full">
                  <p
                    v-for="item in menuStore.currencies"
                    :key="item.iso_code"
                    class="w-full hover:bg-block dark:hover:bg-button pl-1 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
                    @click="
                      () => {
                        $session.setCurrency(item.iso_code);
                        $session.loadSession();
                        dropCurrency = false;
                      }
                    "
                  >
                    {{ item?.name }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onClickOutside } from '@vueuse/core'

const { $session } = useNuxtApp()

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

const dropdownRef = ref(null)

const dropCountry = ref(false)
const dropCurrency = ref(false)

function openDrop(type?: string) {
  if (type === 'country') {
    dropCurrency.value = false
    dropCountry.value = !dropCountry.value
  }
  else {
    dropCountry.value = false
    dropCurrency.value = !dropCurrency.value
  }
}

onClickOutside(dropdownRef, () => {
  isOpen.value = false
  dropCurrency.value = false
  dropCountry.value = false
})
</script>
