@php
    $statePath = $getStatePath();
    ($statePath) ? $audioPath = asset('audio-answers/' . $getRecord()->answer_audio) : $audioPath = null;
@endphp

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        x-data="{
        mediaRecorder: null,
        audioChunks: [],
        audioUrl: null,
        isRecording: false,
        audioDevices: [],
        selectedDeviceId: null,
        audioBlob: null,
        audioFile: null,

        async getAudioDevices() {
            const devices = await navigator.mediaDevices.enumerateDevices();
            this.audioDevices = devices.filter(device => device.kind === 'audioinput');
        },

        async requestAudioPermission() {
            try {
                // Request permission to access audio devices
                await navigator.mediaDevices.getUserMedia({ audio: true });
                // Once permission is granted, get the list of devices
                this.getAudioDevices();
            } catch (err) {
                alert('Permiso para acceder a dispositivos de audio denegado.');
            }
        },

        startRecording() {
            this.mediaRecorder = null;
            this.audioChunks = [];
            this.audioUrl = null;
            this.audioBlob = null;
            this.audioFile = null;

            if (!this.selectedDeviceId) {
                alert('Por favor, selecciona un dispositivo de entrada.');
                return;
            }

            navigator.mediaDevices.getUserMedia({
                audio: { deviceId: this.selectedDeviceId ? { exact: this.selectedDeviceId } : undefined }
            }).then(stream => {
                this.mediaRecorder = new MediaRecorder(stream);
                this.mediaRecorder.start();
                this.isRecording = true;

                this.mediaRecorder.addEventListener('dataavailable', event => {
                    this.audioChunks.push(event.data);
                });

                this.mediaRecorder.addEventListener('stop', () => {
                    this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
                    this.audioUrl = null; // Resetear primero

                    setTimeout(() => {
                        this.audioUrl = URL.createObjectURL(this.audioBlob); // Asignar la nueva URL
                    }, 100);

                    // Crear un archivo a partir del Blob y adjuntarlo al campo oculto del formulario
                    this.audioFile = new File([this.audioBlob], 'grabacion.wav', { type: 'audio/wav' });

                    // Asignar el archivo al input hidden tipo file
                    const fileInput = this.$refs.audioFileInput;
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(this.audioFile);
                    fileInput.files = dataTransfer.files;

                    fileInput.dispatchEvent(new Event('change'));

                });
            });
        },

        stopRecording() {
            this.mediaRecorder.stop();
            this.isRecording = false;
        },

        init() {
            this.requestAudioPermission();

             if ($wire.entangle('{{ $audioPath }}')) {
                this.audioUrl = '{{ $audioPath }}';
                console.log(this.audioUrl);
            }
        }
    }"
        x-init="init()"
        class="space-y-4"
    >

        <div>
            <label for="audio-device" class="block text-sm font-medium text-gray-700">Seleccionar dispositivo de
                entrada</label>
            <select
                id="audio-device"
                x-model="selectedDeviceId"
                class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
            >
                <option value="">-- Seleccionar --</option>
                <template x-for="device in audioDevices" :key="device.deviceId">
                    <option :value="device.deviceId"
                            x-text="device.label || 'Dispositivo de audio desconocido'"></option>
                </template>
            </select>
        </div>

        <div>
            <x-filament::button
                type="button"
                x-on:click="isRecording ? stopRecording() : startRecording()"
                x-color="isRecording ?  'primary' : 'secondary'"
                x-text="isRecording ? 'Detener grabación' : 'Iniciar grabación'"
            ></x-filament::button>
        </div>

        <div x-show="audioUrl">
            <audio :src="audioUrl" controls></audio>
        </div>

        <!-- Campo oculto para el archivo de audio -->
        <input type="file" name="{{ $getStatePath() }}" wire:model="{{ $getStatePath() }}" x-ref="audioFileInput"
               hidden="">
    </div>
</x-dynamic-component>