import {hasGraphics} from './has-graphics';
import {Container} from './container';
import {Image} from './image';
import {Renderable} from './renderable';
import {Sprite} from './sprite';

export class AnimationView extends Renderable {

  constructor(animation) {
    super();
    this.animation = animation;
    this.container = new Container();
    if (hasGraphics) {
      Image.load(this.animation.imageUri).then((image) => {
        this.sprite = new Sprite(image);
        this.container.addChild(this.sprite);
        this.resetSourceRectangle();
      });
    }
    animation.on(
      ['directionChanged', 'indexChanged'],
      this.onAnimationChanged,
      this
    );
  }

  destroy() {
    this.animation.off(
      ['directionChanged', 'indexChanged'],
      this.onAnimationChanged
    );
    if (this.sprite) {
      this.sprite.destroy();
    }
  }

  get internal() {
    return this.container.internal;
  }

  onAnimationChanged() {
    if (this.sprite) {
      this.resetSourceRectangle();
    }
  }

  reset() {
    this.animation.reset();
  }

  resetSourceRectangle() {
    this.sprite.sourceRectangle = this.animation.sourceRectangle;
  }

  tick() {
    this.animation.tick();
  }

}