@php
extract(Flux::forwardedAttributes($attributes, [
    'name',
    'multiple',
    'size',
]));
@endphp

@props([
    'name' => $attributes->whereStartsWith('wire:model')->first(),
    'multiple' => null,
    'size' => null,
])

@php
$classes = Flux::classes()
    ->add('w-full flex items-center gap-4')
    // NOTE: We need to add relative positioning here to prevent odd overflow behaviors because of
    // "sr-only": https://github.com/tailwindlabs/tailwindcss/discussions/12429
    ->add('relative')
    ;

[ $styleAttributes, $attributes ] = Flux::splitAttributes($attributes);
@endphp

<div
    {{ $styleAttributes->class($classes) }}
    data-flux-input-file
    wire:ignore
    tabindex="0"
    x-data {{-- This is here to "scope" the x-ref references inside this component from interfering with others outside... --}}
    x-on:click.prevent.stop="$refs.input.click()"
    x-on:keydown.enter.prevent.stop="$refs.input.click()"
    x-on:keydown.space.prevent.stop
    x-on:keyup.space.prevent.stop="$refs.input.click()"
    x-on:change="$refs.name.textContent = $event.target.files[1] ? ($event.target.files.length + ' {!! __('files') !!}') : ($event.target.files[0]?.name || '{!! __('No file chosen') !!}')"
>
    <input
        x-ref="input"
        x-on:click.stop {{-- Without this, the parent element's click listener will ".prevent" the file input from being clicked... --}}
        {{-- This is here because clearing the input via .value = "" doesn't trigger a change event... --}}
        {{-- We need it to so that we can know to clear the selected file labels when the input is cleared... --}}
        x-init="Object.defineProperty($el, 'value', {
          ...Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value'),
            set(value) {
            Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set.call(this, value);

            if(! value) this.dispatchEvent(new Event('change', { bubbles: true }))
          }
        })"
        type="file"
        class="sr-only"
        tabindex="-1"
        {{ $attributes }} {{ $multiple ? 'multiple' : '' }} @if($name)name="{{ $name }}"@endif
    >

    <flux:button as="div" class="cursor-pointer" :$size aria-hidden="true">
                    {!! __('Choose file') !!}
            </flux:button>

    <div x-ref="name" class="cursor-default select-none truncate whitespace-nowrap text-sm text-zinc-500 dark:text-zinc-400 font-medium" aria-hidden="true">
        {!! __('No file chosen') !!}
    </div>
</div>