const e = new Image()
e.src = require('@/assets/sprite/e.png')
const q = new Image()
q.src = require('@/assets/sprite/q.png')
const r = new Image()
r.src = require('@/assets/sprite/r.png')
const t = new Image()
t.src = require('@/assets/sprite/t.png')

export const render = {
  borders (context, canvas, camera, settings) {
    context.strokeStyle = 'white'
    // context.lineWidth = 1
    // context.shadowBlur = 20
    context.shadowColor = 'white'
    context.strokeRect(canvas.width / 2 - camera.x, canvas.height / 2 - camera.y, settings.arenaSize, settings.arenaSize)
  },
  player (context, canvas, camera, settings, player) {
    const canvasX = canvas.width / 2 + player.x - camera.x
    const canvasY = canvas.height / 2 + player.y - camera.y

    context.save()

    context.translate(canvasX, canvasY)
    context.rotate(player.angle)
    context.fillStyle = player.color
    // context.shadowBlur = 10
    // context.shadowColor = player.color
    context.fillRect(-settings.playerSize, -settings.playerSize, settings.playerSize * 2, settings.playerSize * 2)

    context.restore()

    context.fillStyle = 'white'
    context.textAlign = 'center'
    context.fillText(player.name, canvasX, canvasY - settings.playerSize - 5)
  },
  playerFace (context, canvas, camera, settings, player, face) {
    const canvasX = canvas.width / 2 + player.x - camera.x
    const canvasY = canvas.height / 2 + player.y - camera.y

    const posX = canvasX - settings.playerSize * 2
    const posY = canvasY - settings.playerSize * 2
    const sizeL = settings.playerSize * 4
    const sizeH = settings.playerSize * 4

    switch (face) {
      case 'e' : context.drawImage(e, posX, posY, sizeL, sizeH); break
      case 'q' : context.drawImage(q, posX, posY, sizeL, sizeH); break
      case 'r' : context.drawImage(r, posX, posY, sizeL, sizeH); break
      case 't' : context.drawImage(t, posX, posY, sizeL, sizeH); break
    }
  },
  walls (context, canvas, camera, settings, player) {
    context.beginPath()
    context.lineWidth = settings.wallSize
    context.strokeStyle = player.color
    // context.shadowBlur = 0.5
    // context.shadowColor = player.color
    player.walls.forEach(wall => {
      const canvasX = canvas.width / 2 + wall.x - camera.x
      const canvasY = canvas.height / 2 + wall.y - camera.y
      context.lineTo(canvasX, canvasY)
    })
    context.lineTo(canvas.width / 2 + player.x - camera.x, canvas.height / 2 + player.y - camera.y)
    context.stroke()
  },
  wallsBezier (context, canvas, camera, settings, player) {
    if (player.walls.length === 0) return

    context.beginPath()
    context.lineWidth = settings.wallSize
    context.strokeStyle = player.color

    var canvasX1, canvasY1, canvasX2, canvasY2

    canvasX1 = canvas.width / 2 + player.walls[0].x - camera.x
    canvasY1 = canvas.height / 2 + player.walls[0].y - camera.y

    context.moveTo(canvasX1, canvasY1)

    for (var i = 1; i < player.walls.length - 1; i += 2) {
      canvasX1 = canvas.width / 2 + player.walls[i].x - camera.x
      canvasY1 = canvas.height / 2 + player.walls[i].y - camera.y

      canvasX2 = canvas.width / 2 + player.walls[i + 1].x - camera.x
      canvasY2 = canvas.height / 2 + player.walls[i + 1].y - camera.y

      context.quadraticCurveTo(canvasX1, canvasY1, canvasX2, canvasY2)
    }

    canvasX1 = canvas.width / 2 + player.walls[player.walls.length - 1].x - camera.x
    canvasY1 = canvas.height / 2 + player.walls[player.walls.length - 1].y - camera.y

    canvasX2 = canvas.width / 2 + player.x - camera.x
    canvasY2 = canvas.height / 2 + player.y - camera.y

    context.quadraticCurveTo(canvasX1, canvasY1, canvasX2, canvasY2)

    context.stroke()
  },
  debug (context, camera, mouse, canvas, stats) {
    const canvasX = canvas.width / 2
    const canvasY = canvas.height / 2

    context.fillStyle = 'white'
    context.textAlign = 'start'
    context.fillText('camera x: ' + camera.x + ' y:' + camera.y, 10, 12)
    context.fillText('mouse x: ' + mouse.x + ' y:' + mouse.y, 10, 24)
    context.fillText('canvasX: ' + canvasX + ' canvasY: ' + canvasY, 10, 36)
    context.fillText('Total walls: ' + stats.totalWalls, 10, 48)
    context.fillText('Server update: ' + stats.lastUpdateTime, 10, 60)
    const fps = 1000 / (performance.now() - stats.lastFrame)
    context.fillText('FPS: ' + fps, 10, 72)
  },
  mouse (context, mouse, player) {
    context.beginPath()
    context.arc(mouse.x, mouse.y, 25, 0, 2 * Math.PI, false)
    context.lineWidth = 1
    context.strokeStyle = player.color
    context.stroke()
  },
  leaderboard (context, canvas, leaderboard) {
    context.globalAlpha = 0.1
    context.fillStyle = 'white'
    context.fillRect(canvas.width - 160, 35, 120, 20 + leaderboard.length * 5)
    context.globalAlpha = 1

    context.fillStyle = 'white'
    context.textAlign = 'end'
    context.fillText('Leaderboard: ', canvas.width - 40, 30)
    var i = 1
    leaderboard.forEach(player => {
      context.fillStyle = player.color
      context.fillText(player.name + ' - ' + player.score + ' (' + player.bestScore + ')', canvas.width - 50, 40 + i * 10)
      i++
    })
  },
  sprite (context, canvas, camera, sprite) {
    const canvasX = canvas.width / 2 + sprite.x - camera.x
    const canvasY = canvas.height / 2 + sprite.y - camera.y

    const posX = canvasX - sprite.sizeX * 2
    const posY = canvasY - sprite.sizeY * 2
    const sizeL = sprite.sizeX * 4
    const sizeH = sprite.sizeY * 4

    if (sprite.isAnimated) {
      const frameX = sprite.heightX * (sprite.framesCounter % 8)
      const frameY = sprite.heightY * Math.floor(sprite.framesCounter / 8)
      context.drawImage(sprite.image, frameX, frameY, sprite.heightX, sprite.heightY, posX, posY, sizeL, sizeH)
    } else {
      context.drawImage(sprite.image, posX, posY, sizeL, sizeH)
    }
  }
}
