import { ctx } from './canvas'

class Debugging {
  draw (vp, world, fps) {
    let p = vp.chunkIn(world.chunkSize * world.tileSize)
    ctx.fillStyle = '#fff'
    ctx.fillText(fps + ' fps', 4, 16)
    ctx.fillText('cam-in-chunk (x: ' + p.x + '; y: ' + p.y + ')', 4, 32)
    ctx.fillText('loaded ' + world.chunks.length, 4, 48)
    ctx.fillText('drawn ' + world._lastDrawCount, 4, 64)
    ctx.fillText('updates ' + world._lastUpdateCount, 4, 80)
  }

  createSliders (obj, args, fn) {
    let overlay = document.createElement('div')
    overlay.style = 'color:#fff;position:absolute;top:15px;right:15px;background-color:hsla(0,0%,47%,0.5);padding:10px;display:flex;flex-direction:column;'

    for (let a in args) {
      let min = args[a][0]
      let max = args[a][1]
      let step = args[a][2]
      let div = document.createElement('div')
      div.style = 'display:flex;flex-direction:row;'
      let name = document.createElement('span')
      let value = document.createElement('value')
      let slider = document.createElement('input')
      slider.style = 'flex-grow:1;'
      slider.type = 'range'
      slider.min = min
      slider.max = max
      slider.step = step
      slider.value = obj[a]
      name.innerHTML = a
      value.innerHTML = obj[a]
      slider.addEventListener('input', function (e) {
        obj[a] = parseFloat(slider.value)
        value.innerHTML = slider.value
        fn(a, slider.value)
      })
      div.appendChild(name)
      div.appendChild(slider)
      div.appendChild(value)
      overlay.appendChild(div)
    }
    document.body.appendChild(overlay)
  }
}

export default new Debugging()