import gsap from 'https://cdn.skypack.dev/gsap'

const TOGGLE = document.querySelector('#toggle')
const AUDIO = document.querySelector('audio')
const LABEL = document.querySelector('label')
const CANVAS = document.querySelector('canvas')
const DRAWING_CONTEXT = CANVAS.getContext('2d')
const REVEAL = document.querySelector('.reveal')

REVEAL.addEventListener('click', () => {
  const REVEALED = REVEAL.getAttribute('aria-pressed') === 'true' ? false: true
  REVEAL.setAttribute('aria-pressed', REVEALED)
  REVEAL.title = REVEALED ? 'Hide audio' : 'Show audio'
  AUDIO.style.display = REVEALED ? 'block' : 'none'
})

let AUDIO_CONTEXT
let REPORT

CANVAS.width = CANVAS.height = 300

const CONFIG = {
  fps: 60,
  duration: 0.1,
  fft: 32,
}

let visualizing = false
let recorder

// use for visualization
let squares = []

const genSquares = (size) => {
  squares = new Array(size).fill().map(node => ({
    x: gsap.utils.random(0, CANVAS.width),
    y: gsap.utils.random(0, CANVAS.height),
    size: gsap.utils.random(5, 20),
    scale: 1,
    hue: 90,
  }))
}

const drawSquare = ({ x, y, size, scale, hue }) => {
  const SQUARE_SIZE = scale * size
  const SQUARE_POINT_X = x - SQUARE_SIZE / 2
  const SQUARE_POINT_Y = y - SQUARE_SIZE / 2
  DRAWING_CONTEXT.fillStyle = `hsl(${hue}, 80%, 50%)`
  DRAWING_CONTEXT.fillRect(SQUARE_POINT_X, SQUARE_POINT_Y, SQUARE_SIZE, SQUARE_SIZE)  
}

const drawSquares = () => {
  DRAWING_CONTEXT.clearRect(0, 0, CANVAS.width, CANVAS.height)
  for (const square of squares) {
    drawSquare(square)
  }
}

const updateSquares = () => {
  // give the squares a new position on the map   
  gsap.to(squares, {
    x: () => gsap.utils.random(0, CANVAS.width),
    y: () => gsap.utils.random(0, CANVAS.height),
    size: () => gsap.utils.random(5, 20),
    duration: CONFIG.duration * 5,
  })
}

genSquares(CONFIG.fft * 0.5)
drawSquares()

const ANALYSE = stream => {
  AUDIO_CONTEXT = new AudioContext()
  const ANALYSER = AUDIO_CONTEXT.createAnalyser()
  ANALYSER.fftSize = 32
  const SOURCE = AUDIO_CONTEXT.createMediaStreamSource(stream)
  const DATA_ARR = new Uint8Array(ANALYSER.frequencyBinCount)
  SOURCE.connect(ANALYSER)
  
  if (!squares || (squares.length !== DATA_ARR.length)) genSquares(DATA_ARR.length)
  else updateSquares()
 
  
  REPORT = () => {
    if (recorder) {
      ANALYSER.getByteFrequencyData(DATA_ARR)
      const VOLUME = Math.floor((Math.max(...DATA_ARR) / 255) * 100)
      // At this point change the size of nodes
      gsap.to(squares, {
        duration: CONFIG.duration,
        scale: index => {
          const newScale = DATA_ARR[index] / 255
          return 1 + gsap.utils.mapRange(0, 1, 0, 5)(newScale)
        },
        hue: index => {
          return gsap.utils.mapRange(0, 1, 90, 0)(DATA_ARR[index] / 255)
        }
      })
    }
    if (recorder || visualizing) {
      drawSquares()
    }
  }
  gsap.ticker.add(REPORT)
}


const RECORD = () => {
  const toggleRecording = async () => {
    if (!recorder) {
      visualizing = true
      // Reset the audio tag
      AUDIO.removeAttribute('src')
      TOGGLE.style.setProperty('--active', 1)
      TOGGLE.title = TOGGLE.innerText = 'Stop Recording'
      const CHUNKS = []
      const MEDIA_STREAM = await window.navigator.mediaDevices.getUserMedia({
        audio: true
      })
      recorder = new MediaRecorder(MEDIA_STREAM)
      recorder.ondataavailable = event => {
        // Update the UI
        TOGGLE.style.setProperty('--active', 0)
        TOGGLE.innerText = TOGGLE.title = 'Start Recording'
        // Create the blob and show an audio element
        CHUNKS.push(event.data)
        const AUDIO_BLOB = new Blob(CHUNKS, {type: "audio/mp3"})
        AUDIO.setAttribute('src', window.URL.createObjectURL(AUDIO_BLOB))
        // Tear down after recording.
        recorder.stream.getTracks().forEach(t => t.stop())
        recorder = null
      }
      recorder.start()
      ANALYSE(recorder.stream)
    } else {
      // Stop the recorder and return the nodes back to where they were       
      recorder.stop()
      gsap.to(squares, {
        duration: CONFIG.duration,
        scale: 1,
        hue: 90,
        onComplete: () => {
          visualizing = false
          gsap.ticker.remove(REPORT)
          AUDIO_CONTEXT.close()
        }
      })
    }
  }
  toggleRecording()
}

TOGGLE.addEventListener('click', RECORD)