import { CanvasObject } from './CanvasObject';
import paper from 'paper';
import { ImageInterface } from '../../../CanvasInterface/Objects/Image';

export class Image extends CanvasObject implements ImageInterface {
  public static type = 'Image';

  protected _src = '';

  protected _imageData: any = null;

  protected _transformImageSrc: (n: any) => any | null = null;

  constructor(options?: any) {
    super(options);
    // it has to be called again to set the local properties correctly
    this.initOptions(options);
  }

  set src(src) {
    const prevState = this.toObject();
    this._src = src;
    this.triggerChangeEvent(prevState);
  }

  get src() {
    return this._src;
  }

  get imageData() {
    return this._imageData;
  }

  set imageData(imageData) {
    this._imageData = imageData;
  }

  set transformImageSrc(fn: (n: any) => any | null) {
    this._transformImageSrc = fn;
  }

  async updateOptions(options?: any) {
    await super.updateOptions(options);
    if (options) {
      this.src && (await this.loadFromURL());
    }
    return this;
  }

  async loadFromURL(url: string = this.src) {
    const source = this._transformImageSrc ? await this._transformImageSrc(url) : url;

    return new Promise((resolve, reject) => {
      const raster =
        <paper.Raster>this.wrappedObject ||
        (this.wrappedObject = new paper.Raster({ crossOrigin: 'anonymous' }));
      raster.on('load', () => {
        this.src = url;
        resolve(this);
      });
      raster.on('error', () => {
        reject();
      });
      raster.setSource(source);
    });
  }

  toObject(...args) {
    const { src, imageData } = this;
    return {
      ...super.toObject(...args),
      src,
      imageData,
    };
  }
}