import {AfterViewInit, Directive, ElementRef, EventEmitter, OnDestroy, Output} from '@angular/core';

@Directive({
  selector: '[libScrollInfinite]'
})
export class InfiniteScrollDirective implements AfterViewInit, OnDestroy {

  @Output() infiniteScroll: EventEmitter<void>;
  private _scrollListener: Function;

  constructor(
    private el: ElementRef
  ) {
    this.infiniteScroll = new EventEmitter();
  }

  ngAfterViewInit(): void {
    this._scrollListener = (ev: any) => {
      const element = ev.srcElement;
      if (Math.round(element.scrollTop + element.clientHeight) >= element.scrollHeight) {
        this.infiniteScroll.emit();
      }
    };
    this.el.nativeElement.addEventListener('scroll', this._scrollListener);
  }

  ngOnDestroy(): void {
    this.el.nativeElement.removeEventListener('scroll', this._scrollListener);
  }

}