import {Directive, ElementRef, Inject, Output} from '@angular/core';
import {DOCUMENT} from '@angular/common';
import {fromEvent, Observable} from 'rxjs';
import {map, switchMap, takeUntil, throttleTime} from 'rxjs/operators';

@Directive({
  selector: '[ngxSplitHandle]',
  host: {
    class: 'ngx-split-handle',
    title: 'Drag to resize'
  }
})
export class SplitHandleDirective {
  @Output() drag: Observable<{ x: number, y: number }>;

  constructor(ref: ElementRef, @Inject(DOCUMENT) _document: any) {
    let last = {x: 0, y: 0};
    const scanPositionDelta = (event: MouseEvent) => {
      const current = {x: event.screenX, y: event.screenY};
      const delta = {x: current.x - last.x, y: current.y - last.y};
      last = current;
      return delta;
    };

    const mousedown$ = fromEvent(ref.nativeElement, 'mousedown').pipe(map(scanPositionDelta));
    const mousemove$ = fromEvent(window, 'mousemove').pipe(
      throttleTime(50),
      map(scanPositionDelta)
    );
    const mouseup$ = fromEvent(window, 'mouseup');

    this.drag = mousedown$.pipe(switchMap(() => mousemove$.pipe(takeUntil(mouseup$))));
  }
}