@props(['label', 'icon', 'routeName', 'submenus'])

@php
    use App\Helpers\Routing;

    $isActive = false;
    $thisHref = '';

    if (isset($routeName)) {
        $isActive = Routing::isActive($routeName);
        $thisHref = route($routeName);
    } elseif (isset($submenus)) {
        foreach ($submenus as $sbMenu) {
            if (isset($sbMenu['routeName']) && Routing::isActive($sbMenu['routeName'])) {
                $isActive = true;
                break;
            }
        }
    }
@endphp

<x-stack
    class="relative group [&>button]:px-3 max-lg:w-full max-lg:[&>button]:w-full max-lg:[&>button]:justify-start"
    x-data="{ isOpen: false }"
>
    @if (!isset($submenus))
        <a
            href="{{ $thisHref }}"
            wire:navigate
            class="[&>button]:px-3 max-lg:w-full max-lg:[&>button]:w-full max-lg:[&>button]:justify-start z-[1]"
        >
            <x-button
                {{ $attributes->twMerge($isActive ? 'hover:bg-primary-100' : 'bg-transparent hover:bg-primary-100/50') }}
            >
                @isset($icon)
                    <i
                        class="{{ $isActive ? 'ph-fill' : 'ph' }} {{ $icon }} me-2 group-hover:no-underline"></i>
                @endisset

                <x-text class="text-sm {{ $isActive ? '' : 'group-hover:underline' }}">
                    {{ $label }}
                </x-text>

            </x-button>
        </a>
    @else
        <x-button
            {{ $attributes->twMerge($isActive ? 'hover:bg-primary-100' : 'bg-transparent hover:bg-primary-100/50') }}
            x-on:click="isOpen = !isOpen"
        >
            @isset($icon)
                <i class="ph {{ $icon }} me-2 group-hover:no-underline"></i>
            @endisset

            <x-text class="text-sm">
                {{ $label }}
            </x-text>

            <x-slot name="rightSection">
                <i class="ph ph-caret-down"></i>
            </x-slot>
        </x-button>
    @endif

    @isset($submenus)
        <x-box
            class="w-full absolute top-0 mt-12 lg:mt-[53px] z-10 bg-primary-200 lg:p-2 rounded-md hidden shadow-lg"
            x-show="isOpen"
            x-on:click.away="isOpen = false"
            x-init="$el.classList.remove('hidden')"
        >
            <x-stack class="w-full">
                @foreach ($submenus as $sbMenu)
                    <a
                        href="{{ isset($sbMenu['routeName']) ? route($sbMenu['routeName']) : '#' }}"
                        class="w-full"
                    >
                        <x-button
                            class="w-full {{ Routing::isActive($sbMenu['routeName']) ? '' : 'bg-transparent' }} hover:bg-primary-100/50"
                        >
                            <x-text class="text-sm">
                                {{ $sbMenu['label'] }}
                            </x-text>
                        </x-button>
                    </a>
                @endforeach
            </x-stack>
        </x-box>
    @endisset

</x-stack>