/* global requestAnimationFrame */
import { canvas, ctx } from './canvas'
import { World } from './tiles'
// import { ItemPlaceable } from './items'
import { HeightMap } from './heightmap'
import Debug from './debug'
import Player from './player'
import Input from './input'
import Viewport from './viewport'
import RES from './resource'
import map from './register'

let playing = false
let frameTime = 0
let frameCount = 0
let fps = 0

let vp = new Viewport(0, 0)
let p = new Player(1000, 1000, 32, 64)

let height = new HeightMap(32, 0)

const chunkSize = 32
const tileSize = 16

let world = new World(height, { GROUND: map }, chunkSize, tileSize, 32, 64)

function update (dt) {
  world.update(dt, vp)
  p.update(dt, vp, world)
  vp.update(dt, world)
}

function draw () {
  world.draw(vp)
  p.draw(vp)
  Debug.draw(vp, world, fps)
}

function step () {
  draw()

  let ts = window.performance.now()
  let timeDiff = ts - frameTime // time difference in milliseconds
  frameCount++

  if (timeDiff > 0) {
    fps = Math.floor(frameCount / timeDiff * 1000)
    frameCount = 0
    frameTime = ts
  }

  update(timeDiff / 1000)
}

function gameLoop () {
  playing && requestAnimationFrame(gameLoop)
  ctx.fillStyle = '#111'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  step()

  Input.update()
}

function start () {
  Debug.createSliders(height, {
    amplitude: [0, 100, 1],
    persistence: [0.1, 5, 0.1],
    octaves: [1, 16, 1],
    period: [1, 100, 1],
    lacunarity: [1, 5, 1]
  }, function (key, val) {
    world.chunks = []
  })
  Debug.addCheckbox(Debug, 'drawGrid', function (argument) {
    world.redraw()
  })
  playing = true
  gameLoop()
}

async function loadAll () {
  let images = ['assets/ground.png', 'assets/item_grass.png',
    'assets/item_dirt.png', 'assets/item_stone.png']
  for (let i in images) {
    await RES.loadImage(images[i])
  }
}

loadAll().then(start)