const audio = document.getElementById('radio-stream');
const playPauseBtn = document.getElementById('play-pause');
const muteUnmuteBtn = document.getElementById('mute-unmute');
const progressContainer = document.querySelector('.progress-container');
const progress = document.querySelector('.progress');
const lottiePlayer = document.querySelector('lottie-player'); // Target the lottie-player
const liveIndicator = document.querySelector('.live-indicator');

// Auto play and muted on load
audio.autoplay = true;
audio.muted = true;


// Play/Pause toggle
playPauseBtn.addEventListener('click', () => {
    if (audio.paused) {
        audio.play();
        playPauseBtn.innerHTML  = '<i class="fa fa-pause"></i>'; // Pause Icon
        lottiePlayer.play(); // Start the lottie animation
        liveIndicator.style.opacity = 1; // Show "Live" indicator
    } else {
        audio.pause();
        playPauseBtn.innerHTML  = '<i class="fa fa-play"></i>';
        lottiePlayer.stop(); // Stop the lottie animation
        liveIndicator.style.opacity = 0; // Hide "Live" indicator
    }
});

// Mute/Unmute toggle
// muteUnmuteBtn.addEventListener('click', () => {
//     audio.muted = !audio.muted;
//     muteUnmuteBtn.textContent = audio.muted ? '🔇' : '🔊'; // Toggle between mute/unmute icons
// });
const muteIcon = muteUnmuteBtn.querySelector('.mute-icon');
muteUnmuteBtn.addEventListener('click', () => {
    audio.muted = !audio.muted;  // Toggle muted state
    if (audio.muted) {
        muteIcon.classList.remove('fa-volume-up');   // Remove unmute icon
        muteIcon.classList.add('fa-volume-mute');    // Add mute icon
    } else {
        muteIcon.classList.remove('fa-volume-mute'); // Remove mute icon
        muteIcon.classList.add('fa-volume-up');      // Add unmute icon
    }
});

// Simulate the progress for a live stream
let progressInterval;
audio.addEventListener('play', () => {
    clearInterval(progressInterval);
    progressInterval = setInterval(() => {
        const progressWidth = progress.offsetWidth;
        const containerWidth = progressContainer.offsetWidth;

        if (progressWidth < containerWidth) {
            progress.style.width = `${progressWidth + 1}px`; // Increment the width
        } else {
            clearInterval(progressInterval); // Stop incrementing when full
        }
    }, 100); // Adjust the increment speed (100ms interval)
});

audio.addEventListener('pause', () => {
    clearInterval(progressInterval); // Stop progress simulation on pause
});