@props([
    'label',
    'name',
    'placeholder' => '',
    'required' => false,
    'event' => null,
])

@php
    $event ??= 'update' . \Illuminate\Support\Str::studly($name);
@endphp

<div class="form-group" wire:ignore>
    @if($label)
        <label for="{{ $name }}" class="form-label">
            {{ $label }}

            @if($required)
                <span class="text-danger">*</span>
            @endif
        </label>
    @endif

    <input
        type="text"
        id="{{ $name }}"
        name="{{ $name }}"
        class="form-control tags-input"
        placeholder="{{ $placeholder }}"
        data-livewire-event="{{ $event }}"
        {{ $attributes }}
    >
</div>
@once
<script>
function initTagsInput(root = document) {

    $(root)
        .find('.tags-input')
        .addBack('.tags-input')
        .each(function () {

            const $input = $(this);

            /*
            |--------------------------------------------------------------------------
            | Already initialized
            |--------------------------------------------------------------------------
            */

            if ($input.data('tagsinput')) {
                return;
            }

            /*
            |--------------------------------------------------------------------------
            | Initialize Bootstrap Tags Input
            |--------------------------------------------------------------------------
            */

            $input.tagsinput();

            const tagsInput = $input.data('tagsinput');

            if (!tagsInput) {
                return;
            }

            /*
            |--------------------------------------------------------------------------
            | Livewire event
            |--------------------------------------------------------------------------
            */

            const livewireEvent = $input.data('livewire-event');

            if (!livewireEvent) {
                console.warn(
                    'Tags input: Livewire event not defined.',
                    $input
                );

                return;
            }

            /*
            |--------------------------------------------------------------------------
            | Sync with Livewire
            |--------------------------------------------------------------------------
            */

            const syncWithLivewire = () => {

                const value = tagsInput
                    .items()
                    .map(String)
                    .join(',');

                Livewire.dispatch(livewireEvent, {
                    value
                });
            };

            /*
            |--------------------------------------------------------------------------
            | Prevent duplicate listeners
            |--------------------------------------------------------------------------
            */

            $input.off('.livewireTags');

            /*
            |--------------------------------------------------------------------------
            | Tags Input events
            |--------------------------------------------------------------------------
            */

            $input.on(
                'itemAdded.livewireTags itemRemoved.livewireTags change.livewireTags',
                syncWithLivewire
            );
        });
}


/*
|--------------------------------------------------------------------------
| Livewire initialization
|--------------------------------------------------------------------------
*/

document.addEventListener('livewire:initialized', () => {

    // Initial page load
    initTagsInput();

    // Only initialize tags inputs inside the DOM that Livewire morphs
    Livewire.hook('morphed', ({ el }) => {
        initTagsInput(el);
    });

});
</script>
@endonce