import { Asset } from 'expo-asset'
import { useEffect } from 'react'

const entryJingle = require('../assets/audio/musicland-entry.wav')

const EntryJingle = ({ active }) => {
  useEffect(() => {
    if (!active) {
      return undefined
    }

    const audio = new Audio(Asset.fromModule(entryJingle).uri)
    let isDisposed = false
    let isWaitingForInteraction = false

    audio.loop = false
    audio.preload = 'auto'
    audio.volume = 0.32

    const removeInteractionListeners = () => {
      document.removeEventListener('pointerdown', handleFirstInteraction)
      document.removeEventListener('keydown', handleFirstInteraction)
      isWaitingForInteraction = false
    }

    const play = () => {
      audio
        .play()
        .then(removeInteractionListeners)
        .catch(() => {
          if (isDisposed || isWaitingForInteraction) {
            return
          }
          isWaitingForInteraction = true
          document.addEventListener('pointerdown', handleFirstInteraction, { once: true })
          document.addEventListener('keydown', handleFirstInteraction, { once: true })
        })
    }

    function handleFirstInteraction() {
      if (!isDisposed) {
        play()
      }
    }

    play()

    return () => {
      isDisposed = true
      removeInteractionListeners()
      audio.pause()
      audio.removeAttribute('src')
      audio.load()
    }
  }, [active])

  return null
}

export default EntryJingle