import Tone from 'tone'
import StartAudioContext from './startAudioContext'

import { is_mobile } from '../../util'

export function requestAudioContext (fn) {
  if (is_mobile) {
    const container = document.createElement('div')
    const button = document.createElement('div')
    button.innerHTML = 'Tap to start - please unmute your phone'
    Object.assign(container.style, {
      display: 'block',
      position: 'absolute',
      width: '100%',
      height: '100%',
      zIndex: '10000',
      top: '0px',
      left: '0px',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
    })
    Object.assign(button.style, {
      display: 'block',
      position: 'absolute',
      left: '50%',
      top: '50%',
      padding: '20px',
      backgroundColor: '#7F33ED',
      color: 'white',
      fontFamily: 'monospace',
      borderRadius: '3px',
      transform: 'translate3D(-50%,-50%,0)',
      textAlign: 'center',
      lineHeight: '1.5',
      width: '150px',
    })
    container.appendChild(button)
    document.body.appendChild(container)
    StartAudioContext.setContext(Tone.context)
    StartAudioContext.on(button)
    StartAudioContext.onStarted(_ => {
      container.remove()
      fn()
    })
  } else {
    fn()
  }
}