import {Container, Sprite} from '@avocado/graphics';
import {Vector} from '@avocado/math';

import {Layer} from './layer';
import {TilesRenderer} from './tiles-renderer';

export class LayerView extends Container {

  constructor(layer, renderer) {
    super();
    this.layer = layer;
    this.entityContainer = new Container();
    this.layerContainer = new Container();
    this._renderer = renderer;
    // Handle entity add/remove.
    layer.on('entityAdded', this.onEntityAdded, this);
    layer.on('entityRemoved', this.onEntityRemoved, this);
    for (const entity of layer.entityList) {
      this.onEntityAdded(entity);
    }
    // Watch tile data change.
    layer.on('tileDataChanged', this.onTileDataChanged, this);
    // Watch tileset change.
    layer.on('tilesetChanged', this.onTilesetChanged, this);
    // Add to graphics.
    this.addChild(this.layerContainer);
    this.addChild(this.entityContainer);
  }

  destroy() {
    super.destroy();
    layer.off('entityAdded', this.onEntityAdded);
    layer.off('entityRemoved', this.onEntityRemoved);
    layer.off('tileDataChanged', this.onTileDataChanged);
    layer.off('tilesetChanged', this.onTilesetChanged);
  }

  onEntityAdded(entity) {
    if ('container' in entity) {
      this.entityContainer.addChild(entity.container);
    }
  }

  onEntityRemoved(entity) {
    if ('container' in entity) {
      this.entityContainer.removeChild(entity.container);
    }
  }

  onTileDataChanged() {
    this.render();
  }

  onTilesetChanged() {
    this.render();
  }

  render() {
    this.layerContainer.removeAllChildren();
    if (!this._renderer) {
      return;
    }
    if (!this.layer.tileset) {
      return;
    }
    if (Vector.isZero(this.layer.tiles.size)) {
      return;
    }
    const tilesRenderer = new TilesRenderer(this.layer.tiles, this.layer.tileset);
    const chunk = tilesRenderer.renderChunk(this._renderer);
    const tilesSprite = new Sprite(chunk);
    this.layerContainer.addChild(tilesSprite);
  }

}