import { useEffect, useRef } from 'react'

interface AmbientSoundProps {
    url: string
    volume?: number
}

export function AmbientSound({ url, volume = 0.5 }: AmbientSoundProps) {
    const audioRef = useRef<HTMLAudioElement | null>(null)
    const targetVolumeRef = useRef<number>(volume)

    targetVolumeRef.current = volume

    useEffect(() => {
        const audio = new Audio(url)
        audio.loop = true
        audio.volume = 0 
        audioRef.current = audio

        let componentsMounted = true

        const attemptPlay = () => {
            if (!audioRef.current || !componentsMounted) return
            
            audio.volume = targetVolumeRef.current

            if (audio.volume > 0 && audio.paused) {
                audio.play().catch((err) => {
                    console.warn('Autoplay management holding clip playback execution.', err)
                })
            }
        }

        attemptPlay()

        window.addEventListener('click', attemptPlay)
        window.addEventListener('keydown', attemptPlay)

        return () => {
            componentsMounted = false
            window.removeEventListener('click', attemptPlay)
            window.removeEventListener('keydown', attemptPlay)
            audio.pause()
            audio.src = ''
            audioRef.current = null
        }
    }, [url])

    useEffect(() => {
        const audio = audioRef.current
        if (!audio) return

        if (volume === 0) {
            if (!audio.paused) audio.pause()
        } else {
            audio.volume = volume
            if (audio.paused) {
                audio.play().catch(() => {})
            }
        }
    }, [volume]) 

    return null
}