@props([
    'variant' => 'default',
])

@php
    $languages = available_languages();
    $currentLang = current_language_code();
    $currentLanguage = $languages->firstWhere('code', $currentLang);
    $languageCollapseId = 'offcanvas-language-collapse';

    $languageLabel = static function ($language): string {
        return $language->native_name ?: $language->name ?: strtoupper($language->code);
    };

    $languageFlag = static function ($language): string {
        return resolve_language_flag($language);
    };

    $wrapperClass = $variant === 'offcanvas'
        ? 'language-select-offcanvas w-full'
        : 'navbar-other !ml-5 header-language-desktop !hidden lg:!flex xl:!flex shrink-0';

    $linkClass = 'nav-link dropdown-item dropdown-toggle language-select__trigger xl:!text-[.85rem] lg:!text-[.85rem] max-lg:!text-[1.05rem] !normal-case';
@endphp

@if($variant === 'offcanvas')
    <div {{ $attributes->merge(['class' => $wrapperClass]) }}>
        <button
            type="button"
            class="language-select-offcanvas__toggle w-full flex items-center justify-between !normal-case !text-[1.05rem] !text-white hover:!text-white focus:!text-white bg-transparent border-0 p-0"
            data-bs-toggle="collapse"
            data-bs-target="#{{ $languageCollapseId }}"
            aria-expanded="false"
            aria-controls="{{ $languageCollapseId }}"
        >
            <span class="inline-flex items-center gap-2">
                <span class="material-symbols-outlined language-select__icon">translate</span>
                <span class="sr-only">{{ $currentLanguage ? $languageLabel($currentLanguage) : strtoupper($currentLang) }}</span>
            </span>
            <i class="uil uil-angle-down language-select-offcanvas__icon language-select__caret shrink-0 before:content-['\e92d'] text-[0.85rem] transition-transform duration-200" aria-hidden="true"></i>
        </button>

        <div id="{{ $languageCollapseId }}" class="collapse language-select-offcanvas__panel">
            <ul class="navbar-nav flex-col !ps-0 !mt-2 !mb-0 !normal-case">
                @foreach($languages as $language)
                    <li class="nav-item">
                        <a
                            class="nav-link !py-[0.35rem] !px-0 !text-[0.95rem] !normal-case inline-flex items-center gap-2 {{ $language->code === $currentLang ? 'active font-bold !text-[#e31e24]' : '!text-white/85 hover:!text-white' }}"
                            href="{{ route('language.switch', $language->code) }}"
                        >
                            <span class="language-select__flag shrink-0 text-[1.1rem] leading-none font-bold" aria-hidden="true">{{ $languageFlag($language) }}</span>
                            <span>{{ $languageLabel($language) }}</span>
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
@else
    <div {{ $attributes->merge(['class' => $wrapperClass]) }}>
        <ul class="navbar-nav !flex-row !items-center">
            <li class="nav-item dropdown language-select group">
                <a class="{{ $linkClass }} inline-flex items-center gap-0.5 !pe-1" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="{{ $currentLanguage ? $languageLabel($currentLanguage) : strtoupper($currentLang) }}">
                    <span class="material-symbols-outlined language-select__icon">translate</span>
                </a>
                <ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)] !min-w-[11rem]">
                    @foreach($languages as $language)
                        <li class="nav-item">
                            <a class="dropdown-item hover:!text-[#747ed1] !normal-case inline-flex items-center gap-2 {{ $language->code === $currentLang ? 'active font-bold !text-[#e31e24]' : '' }}"
                               href="{{ route('language.switch', $language->code) }}">
                                <span class="language-select__flag shrink-0 text-[1.05rem] leading-none font-bold" aria-hidden="true">{{ $languageFlag($language) }}</span>
                                <span>{{ $languageLabel($language) }}</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </li>
        </ul>
    </div>
@endif

@once
    @push('styles')
    <style>
        .language-select .dropdown-menu {
            min-width: 11rem;
        }

        .language-select__flag {
            font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
        }

        .language-select .dropdown-item,
        .language-select-offcanvas .nav-link {
            white-space: nowrap;
        }

        .language-select .material-symbols-outlined,
        .language-select-offcanvas .material-symbols-outlined {
            font-family: 'Material Symbols Outlined' !important;
            font-weight: normal !important;
            font-style: normal !important;
            font-size: 1.25rem;
            line-height: 1 !important;
            letter-spacing: normal !important;
            text-transform: none !important;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-smoothing: antialiased;
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .language-select .language-select__trigger {
            display: inline-flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            gap: 0.15rem;
        }

        .language-select .language-select__trigger.dropdown-toggle:after,
        .language-select .language-select__trigger.dropdown-toggle::after {
            position: static !important;
            top: auto !important;
            right: auto !important;
            display: inline-block !important;
            vertical-align: middle !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            line-height: 1;
        }

        .language-select .language-select__trigger .language-select__icon,
        .language-select-offcanvas__toggle .language-select__icon,
        .language-select-offcanvas__toggle .language-select__caret {
            color: #e31e24;
        }

        .navbar-dark .language-select .language-select__trigger .language-select__icon {
            color: #ffffff;
        }

        .navbar-dark .language-select .language-select__trigger.dropdown-toggle:after,
        .navbar-dark .language-select .language-select__trigger.dropdown-toggle::after {
            color: #ffffff !important;
        }

        .navbar-light .language-select .language-select__trigger .language-select__icon {
            color: #e31e24;
        }

        .navbar-light .language-select .language-select__trigger.dropdown-toggle:after,
        .navbar-light .language-select .language-select__trigger.dropdown-toggle::after {
            color: #e31e24 !important;
        }
    </style>
    @endpush
@endonce