import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { Subject } from 'rxjs';
import { buffer, debounceTime, takeUntil } from 'rxjs/operators';

@Directive({
  selector: '[appMultiClick]'
})
export class MultiClickDirective implements OnInit, OnDestroy {
  @Input() threshold = 250;
  @Output()
  multiClick = new EventEmitter<{ originalEvent: Event; times: number }>();
  private clickStream$ = new Subject<Event>();
  private destroy$ = new Subject();
  constructor() {}
  ngOnInit() {
    this.clickStream$
      .pipe(
        buffer(this.clickStream$.pipe(debounceTime(this.threshold))),
        takeUntil(this.destroy$)
      )
      .subscribe(clicks => {
        this.multiClick.emit({
          originalEvent: clicks[0],
          times: clicks.length
        });
      });
  }
  ngOnDestroy() {
    this.destroy$.next(true);
  }
  @HostListener('click', ['$event'])
  clickEvent(event) {
    event.preventDefault();
    event.stopPropagation();
    this.clickStream$.next(event);
  }
}