import Konva from "konva";
import { IMarkupImage } from "../../IMarkupImage";

export class KonvaImage implements IMarkupImage {
  private _ref: Konva.Image;
  private _canvasImage: HTMLImageElement;
  private _ratio = 1;

  constructor(
    params: { position: { x: number; y: number }; src: string; width: number; height: number; id?: string },
    ref = null
  ) {
    if (ref) {
      if (ref.height() === 0 || ref.width() === 0) return;

      this._ref = ref;
      this._canvasImage = ref.image();
      this._ratio = this._ref.height() / this._ref.width();
      return;
    }

    if (!params.position || !params.src) return;
    this._canvasImage = new Image();

    this._ref = new Konva.Image({
      x: params.position.x,
      y: params.position.y,
      image: this._canvasImage,
      width: params.width,
      height: params.height,
      draggable: true,
    });

    this._canvasImage.onload = () => {
      this._ref.image(this._canvasImage);
      this._ratio = this._ref.height() === 0 || this._ref.width() === 0 ? 1 : this._ref.height() / this._ref.width();
    };

    this._canvasImage.src = params.src;

    this._ref.id(this._ref._id.toString());
  }

  getSrc(): string {
    return this._canvasImage.src;
  }

  setSrc(src: any) {
    this._canvasImage.src = src;
  }

  getWidth(): number {
    return this._ref.width();
  }

  setWidth(w: number) {
    this._ref.width(w);
    this._ref.height(w * this._ratio);
  }

  getHeight(): number {
    return this._ref.height();
  }

  setHeight(h: number) {
    this._ref.height(h);
    this._ref.width(h / this._ratio);
  }

  ref() {
    return this._ref;
  }

  id(): string {
    return this._ref.id();
  }

  enableMouseEditing(value: boolean) {
    this._ref.draggable(value);
  }

  type(): string {
    return "image";
  }

  // we can break Liskov Substitution Principle, need to use separate IColorable
  // getColor(): string {
  //   return this._ref.fill();
  // }

  // setColor(hex: string) {
  //   this._ref.fill(hex);
  // }

  getRotation(): number {
    return this._ref.rotation();
  }

  setRotation(degrees: number): void {
    this._ref.rotation(degrees);
  }

  getZIndex(): number {
    return this._ref.zIndex();
  }

  setZIndex(zIndex: number): void {
    this._ref.zIndex(zIndex);
  }

  delete() {
    this._ref.destroy();
    this._ref = null;
  }

  getPosition(): { x: number; y: number } {
    return this._ref.getPosition();
  }

  setPosition(x: number, y: number) {
    this._ref.setPosition({ x, y });
  }
}