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

@php
    use App\Helpers\Routing;
    $isActive = false;
    $navigationHref = '';
    $refName = '';
    $hasSubRoutes = isset($subRoutes) && count($subRoutes) > 0;
    $hasActiveSubRoute = false;

    if (isset($routeName)) {
        $isActive = Routing::isActive($routeName);
        $refName = 'navigation_' . explode('.', $routeName)[1];
        if (Route::has($routeName)) {
            $navigationHref = route($routeName);
        }
    }

    if ($hasSubRoutes) {
        foreach ($subRoutes as $subRoute) {
            if (Route::has($subRoute['routeName'])) {
                if (Routing::isActive($subRoute['routeName'])) {
                    $isActive = true;
                    break;
                }
            }
        }
    }

@endphp

<x-stack
    class="w-full"
    x-data="{
        isNavCollapsed: {{ $isActive ? 'true' : 'false' }},
        hasSubRoutes: {{ $hasSubRoutes ? 'true' : 'false' }},
        isThisMenuActive: {{ $isActive ? 'true' : 'false' }}
    }"
    wire:key="{{ rand() }}"
>

    <a
        href="{{ $navigationHref }}"
        x-ref="{{ $refName }}"
        wire:navigate
        class="hidden"
    ></a>

    <x-button
        class="w-full text-sm {{ $isActive ? 'bg-primary-100 hover:bg-primary-100 cursor-default' : 'bg-secondary-200/65 hover:bg-secondary-200/90' }} justify-start gap-2 px-2"
        x-bind:class="isSidebarCollapsed ? 'lg:justify-center py-3 lg:flex-wrap' : ''"
        x-on:click="() => {
            if (isThisMenuActive && !hasSubRoutes) return

            if (window.innerWidth < 1024) {
                isSidebarCollapsed = false
            }

            isNavCollapsed = !isNavCollapsed
            if (hasSubRoutes) return
            $refs['{{ $refName }}'].click()
        }"
    >

        <i
            class="{{ $isActive ? 'ph-fill text-tertiary-100' : 'ph-bold' }} {{ $icon }}"
            x-bind:class="{ 'text-lg': isSidebarCollapsed }"
        ></i>

        <x-text
            class="flex-1 text-start"
            x-bind:class="isSidebarCollapsed ? 'lg:hidden' : ''"
            {{-- x-show="!isSidebarCollapsed" --}}
        >
            {{ $label }}
        </x-text>
        @isset($subRoutes)
            <i
                class="ph-bold ph-caret-down ms-auto"
                x-bind:class="{ 'transform rotate-180': isNavCollapsed, 'w-full': isSidebarCollapsed }"
            ></i>
        @endisset

    </x-button>

    @if ($hasSubRoutes)
        <x-stack
            class="w-full gap-0"
            x-show="isNavCollapsed"
            x-bind:class="isSidebarCollapsed ? 'ps-1' : 'ps-3'"
        >
            @foreach ($subRoutes as $subRoute)
                @php
                    $thisSubHref = '';
                    $isSubActive = false;

                    if (Route::has($subRoute['routeName'])) {
                        $thisSubHref = route($subRoute['routeName']);
                        $isSubActive = Routing::isActive($subRoute['routeName']);
                    }
                @endphp

                <a
                    class="w-full text-sm border-l-2 py-1 px-3 {{ $isSubActive ? 'text-primary-200 font-bold pointer-events-none border-primary-100' : 'text-secondary-200 border-secondary-200/70 hover:text-primary-200 hover:font-semibold hover:border-primary-100' }}"
                    href="{{ $thisSubHref }}"
                    wire:navigate
                    x-text="isSidebarCollapsed ? '&#11044;' : '{{ $subRoute['label'] }}'"
                >
                </a>
            @endforeach
        </x-stack>
    @endif

</x-stack>