import * as PIXI from './../com/pixi.min';
import Log from './../utils/Log';

if (!PIXI.APPS) {
  PIXI.APPS = [];
}

export default class Soul {
  renderer: object;
  startStyle: any;
  isFullScreen: boolean;
  _version: string;
  stage: any;
  OW: number;
  OH: number;
  main: any;
  app: PIXI.Application;

  constructor(canvas, Class, _options: any = {}) {
    PIXI.utils.skipHello();

    if (canvas) {
      let options = Object.assign({
        view: canvas,
        assetPath: 'assets/',
        fullscreen: false,
        transparent: false,
        backgroundColor: Math.floor(0xffffff * Math.random()),
        updatable: true,
        resizeble: true,
        forceCanvas: false,
        antialias: true,
        width: 20, height: 20
      }, _options);

      this._version = options.version;

      options = Object.assign(options, Class._options);

      let app = this.app = new PIXI.Application(options.width, options.height, options);
      this.renderer = this.app.renderer;

      this.isFullScreen = options.fullscreen;
      let style = app.view.style;
      this.startStyle = {width: style.width, height: style.height, top: style.top, autosize: options.autosize};

      if (options.updatable) {
        app.ticker.add(() => {
          this.update(app.ticker.elapsedMS);
        });
      }
      if (options.resizeble) {
        app.ticker.add(() => {
          this.resize();
        });
      }
      this.resize(true);
      this.stage = app.stage;
      this.stage.addChild(this.main = new Class(this, options));
    } else {
      // alert('canvas is not initilized!');
      Log.errorFrom(this, 'canvas is not initilized!');
    }
  }

  update(delta) {
    this.main.update(delta);
  }

  resize(force = false) {
    const app = this.app;
    const renderer = app.renderer;
    const view = renderer.view;
    if (this.isFullScreen) {
      view.width = document.body.clientWidth;
      view.height = document.body.clientHeight;
      view.style.top = '0px';
      view.style.position = 'absolute';
      view.style['z-index'] = 100;
      view.style.width = `${document.body.clientWidth}px`;
      view.style.height = `${document.body.clientHeight}px`;
    } else {
      view.style.position = 'relative';
      if (this.startStyle.autosize) {
        view.style.width = '100%';
        view.style.height = '100%';
        view.style['z-index'] = 0;
        view.width = view.offsetWidth;
        view.height = view.offsetHeight;
      } else {
        view.width = view.clientWidth;
        view.height = view.clientHeight;
        view.style.width = this.startStyle.width;
        view.style.height = this.startStyle.height;
      }
    }
    if (this.main) this.main.resize(view.width, view.height, force);
    renderer.resize(view.width, view.height);

    this.OW = view.width;
    this.OH = view.height;
  }

  destroy() {
    this.app.ticker.destroy();
  }

  fullscreen() {
    this.isFullScreen = !this.isFullScreen;
    this.app.view.style.position = this.isFullScreen ? 'absolute' : 'relative';
  }

  get MainApp() {
    return this.main;
  }
}