@props(['alternates'])
@php
    use \Mcamara\LaravelLocalization\Facades\LaravelLocalization;
    $locales = LaravelLocalization::getSupportedLocales();
    if (!isset($alternates) or (count($alternates) == 0)) {
        $searchParams = request()->query();
        $alternates = array_map(function ($key) use ($searchParams) {
            $translatedParams = \App\Helpers\TranslationHelper::translatePimFilters($searchParams, $key);
            $queryStr = count($translatedParams) > 0 ? '?' . http_build_query($translatedParams) : '';
            return [
                'locale' => $key,
                'lang' => str_replace('_', '-', $key),
                'href' => LaravelLocalization::getLocalizedURL($key, null, [], true) . $queryStr,
            ];
        }, array_keys($locales));
    }
@endphp
<div x-data="menuPopup({ anchorPosition: 'right' })" x-bind="root" class="relative inline-block text-left">
    <!-- Dropdown Button -->
    <button class="flex items-center text-white px-4 py-2 md:border-2 border-white/20 rounded-full" aria-label="{{ __('messages.mudar-idioma') ?? 'Mudar idioma' }}">
        <img class="h-6" src="{{ asset('images/bandeiras/'.  app()->getLocale(). '.svg') }}"
             alt="{{ app()->getLocale() }}"/>
        <div class=" font-bold text-sm text-white mx-2">{{ strtoupper(substr(app()->getLocale(), 0, 2)) }}</div>
        <img src="{{ asset('images/alt-arrow-down.svg') }}"/>
    </button>

    <!-- Dropdown Menu -->
    <template x-teleport="body">
        <div x-show="open"
             x-cloak
             x-transition
             class="fixed z-50 w-64 bg-white p-4 rounded-2xl"
             :style="getPositionStyle()"
             @mouseenter="clearTimeout(closing)"
             @mouseleave="startClosing()">
            @foreach($alternates as $alternate)
                <a
                    @click="open = false"
                    rel="alternate"
                    hreflang="{{ $alternate['lang'] }}"
                    href="{{ $alternate['href'] }}"
                    class="block px-4 p-2 text-base font-bold font-headline text-deepblue  hover:opacity-100 {{ App::getLocale() == $alternate['locale'] ? 'opacity-100' : 'opacity-70' }} transition-opacity"
                >
                    <img src="{{ asset('images/bandeiras/'. $alternate['locale']. '.svg') }}"
                         alt="{{  $locales[ $alternate['locale'] ]['native'] }}"
                         class="w-5 h-5 inline-block mr-1">
                    {{ $locales[ $alternate['locale'] ]['native'] }}
                </a>
            @endforeach
        </div>
    </template>
</div>