import Room from "./room.js"
import Tileset from "./tileset.js"

const IMAGE_ASSETS = {
}

const TILESET_ASSETS = {
}

const ROOM_ASSETS = {
  sampleRoom: "./rooms/sample.tmj"
}

export default class Assets {
  constructor() {
    this.assetMap = {}
  }

  get(assetName) {
    console.log("getting", assetName)
    console.log("from", this.assetMap)
    return this.assetMap[assetName]
  }

  async load() {
    await Promise.all([
      this.loadImages(IMAGE_ASSETS),
      this.loadTilesets(TILESET_ASSETS),
      this.loadRooms(ROOM_ASSETS)
    ])
    Object.keys(ROOM_ASSETS).forEach(roomName => this.get(roomName).populateTilesets(this))
  }

  loadImages(images) {
    return Promise.all(Object.entries(images).map(entry => this.loadImage(...entry)))
  }

  loadTilesets(tilesets) {
    return Promise.all(Object.entries(tilesets).map(entry => this.loadTileset(...entry)))
  }

  loadRooms(rooms) {
    return Promise.all(Object.entries(rooms).map(entry => this.loadRoom(...entry)))
  }

  loadImage(name, path) {
    console.log(name, path)
    return new Promise(resolve => {
      const img = new Image()
      this.assetMap[name] = img
      img.src = path
      img.addEventListener("load", () => resolve(img))
    })
  }

  loadTileset(name, path) {
    return fetch(path).then(rsp => rsp.json()).then(json => {
      return this.assetMap[name] = new Tileset(json, name)
    }).then(tileset => this.loadImages(tileset.imagesToLoad))
  }

  loadRoom(name, path) {
    return fetch(path).then(rsp => rsp.json()).then(json => {
      return this.assetMap[name] = new Room(json, name)
    }).then(room => this.loadTilesets(room.tilesetsToLoad))
  }
}