@php
    use Filament\Support\Enums\IconSize;
    use Filament\Support\Enums\Size;
    use Filament\Support\View\ComponentAttributeBag as FilamentComponentAttributeBag;
    use Filament\Support\View\Components\BadgeComponent;
    use Filament\Support\View\Components\DropdownComponent\ItemComponent;
    use Filament\Support\View\Components\DropdownComponent\ItemComponent\IconComponent;
    use Illuminate\View\ComponentAttributeBag;
@endphp

@props([
    'alpineDeferredBadgeData' => null,
    'alpineDeferredBadgeLoading' => null,
    'badge' => null,
    'badgeColor' => 'primary',
    'badgeTooltip' => null,
    'color' => 'gray',
    'disabled' => false,
    'href' => null,
    'icon' => null,
    'iconAlias' => null,
    'iconColor' => null,
    'iconSize' => null,
    'image' => null,
    'keyBindings' => null,
    'loadingIndicator' => true,
    'spaMode' => null,
    'tag' => 'button',
    'target' => null,
    'tooltip' => null,
])

@php
    if (filled($iconSize) && (! $iconSize instanceof IconSize)) {
        $iconSize = IconSize::tryFrom($iconSize) ?? $iconSize;
    }

    $iconColor ??= $color;

    $wireTarget = $loadingIndicator ? $attributes->whereStartsWith(['wire:target', 'wire:click'])->filter(fn ($value): bool => filled($value))->first() : null;

    $hasLoadingIndicator = filled($wireTarget);

    if ($hasLoadingIndicator) {
        $loadingIndicatorTarget = html_entity_decode($wireTarget, ENT_QUOTES);
    }

    $hasDeferredBadge = filled($alpineDeferredBadgeData);
    $hasTooltip = filled($tooltip);

    $loadingDelay = ($icon || $hasLoadingIndicator)
        ? config('filament.livewire_loading_delay', 'default')
        : null;
@endphp

{!! ($tag === 'form') ? ('<form ' . $attributes->only(['action', 'class', 'method', 'wire:submit'])->toHtml() . '>') : '' !!}

@if ($tag === 'form')
    @csrf
@endif

<{{ ($tag === 'form') ? 'button' : $tag }}
    @if (($tag === 'a') && (! ($disabled && $hasTooltip)))
        {{ \Filament\Support\generate_href_html($href, $target === '_blank', $spaMode) }}
    @endif
    @if ($keyBindings)
        x-bind:id="$id('key-bindings')"
        x-mousetrap.global.{{ collect($keyBindings)->map(fn (string $keyBinding): string => str_replace('+', '-', $keyBinding))->implode('.') }}="document.getElementById($el.id)?.click()"
    @endif
    @if ($hasTooltip)
        x-tooltip="{
            content: @js($tooltip),
            theme: $store.theme,
            allowHTML: @js($tooltip instanceof \Illuminate\Contracts\Support\Htmlable),
        }"
    @endif
    {{
        $attributes
            ->when(
                $tag === 'form',
                fn (ComponentAttributeBag $attributes) => $attributes->except(['action', 'class', 'method', 'wire:submit']),
            )
            ->merge([
                'aria-disabled' => $disabled ? 'true' : null,
                'disabled' => $disabled && blank($tooltip),
                'type' => match ($tag) {
                    'button' => 'button',
                    'form' => 'submit',
                    default => null,
                },
                'wire:loading.attr' => $tag === 'button' ? 'disabled' : null,
                'wire:target' => ($hasLoadingIndicator && $loadingIndicatorTarget) ? $loadingIndicatorTarget : null,
            ], escape: false)
            ->when(
                $disabled && $hasTooltip,
                fn (ComponentAttributeBag $attributes) => $attributes->filter(
                    fn (mixed $value, string $key): bool => ! str($key)->startsWith(['href', 'x-on:', 'wire:click']),
                ),
            )
            ->class([
                'fi-dropdown-list-item',
                'fi-disabled' => $disabled,
            ])
            ->color(ItemComponent::class, $color)
    }}
>
    @if ($icon || $iconAlias)
        {{
            \Filament\Support\generate_icon_html($icon, $iconAlias, (new FilamentComponentAttributeBag([
                'wire:loading.remove.delay.' . $loadingDelay => $hasLoadingIndicator,
                'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
            ]))->color(IconComponent::class, $iconColor), size: $iconSize)
        }}
    @endif

    @if ($image)
        <div
            class="fi-dropdown-list-item-image"
            style="background-image: url('{{ $image }}')"
            @if ($hasLoadingIndicator)
                wire:loading.remove.delay.{{ $loadingDelay }}
                wire:target="{{ $loadingIndicatorTarget }}"
            @endif
        ></div>
    @endif

    @if ($hasLoadingIndicator)
        {{
            \Filament\Support\generate_loading_indicator_html((new FilamentComponentAttributeBag([
                'wire:loading.delay.' . $loadingDelay => '',
                'wire:target' => $loadingIndicatorTarget,
            ]))->color(IconComponent::class, $iconColor), size: $iconSize)
        }}
    @endif

    <span class="fi-dropdown-list-item-label">
        {{ $slot }}
    </span>

    @if (filled($badge))
        @if ($badge instanceof \Illuminate\View\ComponentSlot)
            {{ $badge }}
        @else
            <span
                @if ($badgeTooltip)
                    x-tooltip="{
                        content: @js($badgeTooltip),
                        theme: $store.theme,
                        allowHTML: @js($badgeTooltip instanceof \Illuminate\Contracts\Support\Htmlable),
                    }"
                @endif
                {{ (new FilamentComponentAttributeBag)->color(BadgeComponent::class, $badgeColor)->class(['fi-badge']) }}
            >
                {{ $badge }}
            </span>
        @endif
    @elseif ($hasDeferredBadge)
        <span
            x-show="{{ $alpineDeferredBadgeLoading }}"
            x-cloak
            class="fi-dropdown-list-item-badge-placeholder"
        >
            {{ \Filament\Support\generate_loading_indicator_html(size: \Filament\Support\Enums\IconSize::Small) }}
        </span>

        <template
            x-if="
                ! {{ $alpineDeferredBadgeLoading }} &&
                    {{ $alpineDeferredBadgeData }}?.badge != null
            "
        >
            <span
                x-bind:class="'fi-badge ' + ({{ $alpineDeferredBadgeData }}?.badgeColorClasses ?? '')"
                x-bind:style="{{ $alpineDeferredBadgeData }}?.badgeColorStyles ?? ''"
                x-init="
                    let tooltip = {{ $alpineDeferredBadgeData }}?.badgeTooltip
                    if (tooltip) {
                        window.tippy?.($el, {
                            content: tooltip,
                            theme: $store.theme,
                        })
                    }
                "
            >
                <span class="fi-badge-label-ctn">
                    <span
                        class="fi-badge-label"
                        x-text="{{ $alpineDeferredBadgeData }}?.badge"
                    ></span>
                </span>
            </span>
        </template>
    @endif
</{{ ($tag === 'form') ? 'button' : $tag }}>

{!! ($tag === 'form') ? '</form>' : '' !!}