import { ctx } from './canvas'
import Input from './input'

class Debugging {
  constructor () {
    this.overlay = document.createElement('div')
    this.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;'
    document.body.appendChild(this.overlay)
    this.drawGrid = false
    this.infotext = true
    this.addCheckbox(this, 'infotext')
  }

  draw (vp, world, fps) {
    if (!this.infotext) return
    let p = vp.chunkIn(world.chunkSize * world.tileSize)
    ctx.fillStyle = '#fff'
    ctx.fillText(fps + ' fps', 4, 16)
    ctx.fillText('cam (x: ' + vp.x + '; y: ' + vp.y + ')', 4, 16 * 2)
    ctx.fillText('cam-in-chunk (x: ' + p.x + '; y: ' + p.y + ')', 4, 16 * 3)
    ctx.fillText('loaded ' + world.chunks.length, 4, 16 * 4)
    ctx.fillText('drawn ' + world._lastDrawCount, 4, 16 * 5)
    ctx.fillText('updates ' + world._lastUpdateCount, 4, 16 * 6)
    ctx.fillText('active ' + world._active.length, 4, 16 * 7)
    // Mouse
    let mpos = Input.mouse.pos
    let mabs = { x: mpos.x + vp.x, y: mpos.y + vp.y }
    let mpin = world.gridPosition(mabs)
    ctx.fillText('mouse (x: ' + mpos.x + '; y: ' + mpos.y + ')', 4, 16 * 9)
    if (mpin.chunk) {
      ctx.fillText('mouse-in-chunk (x: ' + mpin.chunk.x + '; y: ' + mpin.chunk.y + ')', 4, 16 * 10)
      ctx.fillText('mouse-in-tile (x: ' + mpin.tile.x + '; y: ' + mpin.tile.y + ')', 4, 16 * 11)
    }
  }

  createSliders (obj, args, fn) {
    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 && fn(a, slider.value)
      })
      div.appendChild(name)
      div.appendChild(slider)
      div.appendChild(value)
      this.overlay.appendChild(div)
    }
  }

  addCheckbox (obj, arg, fn) {
    let div = document.createElement('div')
    div.style = 'display:flex;flex-direction:row;'
    let name = document.createElement('span')
    let checkbox = document.createElement('input')
    name.style = 'flex-grow:1;'
    name.innerHTML = arg
    checkbox.type = 'checkbox'
    checkbox.checked = obj[arg] === true
    checkbox.addEventListener('change', function (e) {
      obj[arg] = checkbox.checked
      fn && fn(arg, obj[arg])
    })
    div.appendChild(checkbox)
    div.appendChild(name)
    this.overlay.appendChild(div)
  }

  chunkGrid (ctx, chunk, view) {
    if (!this.drawGrid) return
    // Inner grid
    ctx.lineWidth = 0.15
    ctx.strokeStyle = '#041fff'
    for (let x = 0; x <= chunk.fullSize; x += chunk.tile) {
      ctx.beginPath()
      // Vertical lines
      ctx.moveTo(0 + x, 0)
      ctx.lineTo(0 + x, chunk.fullSize)

      // Horizontal lines
      ctx.moveTo(0, 0 + x)
      ctx.lineTo(chunk.fullSize, 0 + x)

      // Close
      ctx.closePath()
      ctx.stroke()
    }

    // Chunk border
    ctx.lineWidth = 1
    ctx.strokeStyle = '#040404'
    ctx.beginPath()
    ctx.moveTo(0.5, 0)
    ctx.lineTo(0.5, chunk.fullSize)
    ctx.moveTo(0.5, chunk.fullSize)
    ctx.lineTo(chunk.fullSize, chunk.fullSize)
    ctx.closePath()
    ctx.stroke()

    /* Draw colliders
    ctx.fillStyle = '#00aaff'
    let collider = chunk.getLayer('col')
    for (let i in collider.tiles) {
      let p = collider.toXY(parseInt(i))
      if (collider.tiles[i] === 0) continue
      ctx.fillRect(p.x * chunk.tile, p.y * chunk.tile, chunk.tile, chunk.tile)
    }
    */
    // Chunk index
    ctx.fillStyle = '#fff'
    ctx.fillText(chunk.x + ';' + chunk.y, 5, 16)
  }
}

export default new Debugging()