import { EventEmitter } from '@angular/core';

export class DragElement {
  onMove = new EventEmitter();
  canMove = false;
  dragEl = null;
  relX = 0;
  private readonly bindMove: any;
  private readonly maxWidth: any;
  private readonly bindDown: any;
  private readonly bindUp: any;
  constructor(el, maxWidth) {
    this.dragEl = el;
    this.maxWidth = maxWidth;
    this.bindMove = this.move.bind(this);
    this.bindDown = this.down.bind(this);
    this.bindUp = this.up.bind(this);
    this.dragEl.addEventListener('mousedown', this.bindDown, false);
    document.addEventListener('mouseup', this.bindUp, false);
  }
  dispose() {
    this.dragEl.removeEventListener('mousedown', this.bindDown, false);
  }
  down(e) {
    document.addEventListener('mousemove', this.bindMove, false);
    // relX = e.pageX - this.timeLine.offsetWidth || 0;
    // const left = parseInt(el.offsetWidth|| 0)
    const matrix = new DOMMatrix(this.dragEl.style.transform);
    this.relX = e.pageX - matrix.m41 || 0;
    this.canMove = true;
  }
  up(e) {
    this.canMove = false;
    document.removeEventListener('mousemove', this.bindMove, false);
  }
  move(e) {
    if (!this.canMove) {
      return;
    }
    const matrix = new DOMMatrix(this.dragEl.style.transform);
    const w = matrix.m41;
    if (w > this.maxWidth) {
      this.dragEl.style.transform = `translateX(${this.maxWidth}px)`;
      return;
    }
    if (w < 0 ) {
      this.dragEl.style.transform = `translateX(0px)`;
      return;
    }
    // this.dragEl.style.transform = `translateX(${(e.pageX - this.relX)}px)`;
    this.onMove.emit({
      position: e.pageX - this.relX,
    });

  }
}