@props([
	'options' => [],
	'selectedOptions' => null,
])

@php
	// Evita que valores tipo array queden dentro de $attributes (causan: trim() expects string, array given)
	// y hace más robusto el soporte para wire:model, wire:model, wire:model.live, etc.
	$attributesArray = $attributes->getAttributes();
	$wireModelKey = collect($attributesArray)
		->keys()
		->first(function ($key) {
			return is_string($key) && \Illuminate\Support\Str::startsWith($key, 'wire:model');
		});
	$wireModel = $wireModelKey ? ($attributesArray[$wireModelKey] ?? null) : null;

	$id = $attributesArray['id'] ?? ('select2_' . (string) \Illuminate\Support\Str::uuid());
	$selectedWrapped = \Illuminate\Support\Arr::wrap($selectedOptions);
@endphp

<div>
	<div wire:ignore class="w-full">
		<select {!! $attributes->except(['options', 'selectedOptions'])->merge([
			'id' => $id,
		    'class' =>
		        'h-10 mt-2 block w-full rounded-md border-0 py-2.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-600 sm:text-sm sm:leading-6',
		]) !!} data-placeholder="{{ __('Select your option') }}">
			@if (!isset($attributes['multiple']))
				<option></option>
			@endif
			@foreach ($options as $key => $value)
				<option value="{{ is_array($key) ? json_encode($key) : $key }}" @selected(in_array($key, $selectedWrapped, true))>
					{{ is_array($value) ? json_encode($value) : $value }}
				</option>
			@endforeach
		</select>
	</div>
</div>

@push('scripts')
	<script>
		document.addEventListener('livewire:initialized', () => {
			let el = $('#{{ $id }}')
			const wireModel = @json($wireModel);

			initSelect()
			Livewire.hook('morphed', ({ el, component }) => {
				initSelect()
			});

			el.on('change', function(e) {
				let data = $(this).select2("val")
				if (data === "") {
					data = null
				}
				if (!wireModel) return;
				@this.set(wireModel, data)
			});

			function initSelect() {
				el.select2({
					placeholder: el.data('placeholder') || 'Seleccione una Opcion',
					allowClear: !el.attr('required')
				})
			}
		});
	</script>
@endpush