import {
  Directive,
  Output,
  EventEmitter,
  ElementRef,
  OnInit,
  HostListener,
  AfterViewInit
} from '@angular/core';
import { Subject } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
import { ResizedEvent } from './f-resized.events';

@Directive({
  selector: '[fResized]'
})
export class FResizedDirective implements OnInit, AfterViewInit {
  @Output() readonly resizedEvent = new EventEmitter<ResizedEvent>();
  private oldWidth: number;
  private oldHeight: number;
  private resizeSubject = new Subject<number>();
  private resizeObservable = this.resizeSubject
    .asObservable()
    .pipe(throttleTime(200));

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.resizeSubject.next(event);
  }
  constructor(private readonly element: ElementRef) {}

  ngOnInit() {
    this.resizeObservable.subscribe(x => this.doWithResize());
  }
  ngAfterViewInit() {
    this.doWithResize();
  }

  private doWithResize() {
    const newWidth = this.element.nativeElement.clientWidth;
    const newHeight = this.element.nativeElement.clientHeight;

    if (newWidth === this.oldWidth && newHeight === this.oldHeight) {
      return;
    }
    this.resizedEvent.next(
      new ResizedEvent(
        this.element,
        newWidth,
        newHeight,
        this.oldWidth,
        this.oldHeight
      )
    );

    this.oldWidth = newWidth;
    this.oldHeight = newHeight;
  }
}