import { ChangeDetectorRef, Component, ElementRef, Input } from '@angular/core';

@Component({
  selector: '[app-status]',
  templateUrl: './status.component.html',
  styleUrls: ['./status.component.scss'],
})
export class StatusComponent {
  static STOPPED_STATUS_RECT_WIDTH = 10;

  data = {
    status: '',
    path: null,
    direction: null,
    d: null,
  };

  constructor(protected element: ElementRef, private ref: ChangeDetectorRef) {}

  @Input('app-status')
  set status(value) {
    this.data.status = value;
    this.ref.markForCheck();
  }

  @Input('path')
  set path(value) {
    this.data.path = value;
    this.ref.markForCheck();
  }

  @Input('direction')
  set direction(value) {
    this.data.direction = value;
    this.ref.markForCheck();
  }

  @Input('d')
  set d(value) {
    if (this.data.d !== value) {
      this.data.d = value;
      this.ref.markForCheck();
    }
  }

  get status() {
    return this.data.status;
  }

  get direction() {
    return this.data.direction;
  }

  get path() {
    return this.data.path;
  }

  get sourceStatusPoint() {
    if (!this.path) {
      return null;
    }
    return this.path.nativeElement.getPointAtLength(45);
  }

  get targetStatusPoint() {
    if (!this.path) {
      return null;
    }
    return this.path.nativeElement.getPointAtLength(this.path.nativeElement.getTotalLength() - 45);
  }

  get point() {
    if (this.direction === 'source') {
      return this.sourceStatusPoint;
    }
    return this.targetStatusPoint;
  }
}
