import Konva from "konva";
import { IMarkupArrow } from "../../IMarkupArrow";
import { IMarkupColorable } from "../../IMarkupColorable";

export class KonvaArrow implements IMarkupArrow, IMarkupColorable {
  private _ref: Konva.Arrow;

  constructor(
    params: {
      start: { x: number; y: number };
      end: { x: number; y: number };
      color?: string;
      id?: string;
    },
    ref = null
  ) {
    if (ref) {
      this._ref = ref;
      return;
    }

    if (!params.start || !params.end) return;

    this._ref = new Konva.Arrow({
      stroke: params.color ?? "#ff0000",
      fill: params.color ?? "#ff0000",
      strokeWidth: 4,
      globalCompositeOperation: "source-over",
      lineCap: "round",
      lineJoin: "round",
      points: [params.start.x, params.start.y, params.end.x, params.end.y],
      draggable: true,
      strokeScaleEnabled: false,
    });

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

  ref() {
    return this._ref;
  }

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

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

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

  getColor(): string {
    return this._ref.stroke();
  }

  setColor(hex: string) {
    this._ref.stroke(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;
  }

  getPoints(): { x: number; y: number }[] {
    const points = this._ref.points();
    return [
      { x: points[0], y: points[1] },
      { x: points[2], y: points[3] },
    ];
  }

  setPoints(points: { x: number; y: number }[]) {
    if (points.length === 2) {
      this._ref.points([points[0].x, points[0].y, points[1].x, points[1].y]);
    }
  }

  getStartPoint(): { x: number; y: number } {
    const points = this._ref.points();
    return { x: points[0], y: points[1] };
  }

  setStartPoint(x: number, y: number) {
    const points = this._ref.points();
    this._ref.points([x, y, points[2], points[3]]);
  }

  getEndPoint(): { x: number; y: number } {
    const points = this._ref.points();
    return { x: points[2], y: points[3] };
  }

  setEndPoint(x: number, y: number) {
    const points = this._ref.points();
    this._ref.points([points[0], points[1], x, y]);
  }
}