import { Component, OnDestroy, OnInit } from '@angular/core';

import { Store } from '@ngrx/store';

import { AppActions } from '@app/store/actions';
import { fromEvent, interval, Subscription } from 'rxjs';
import { debounce } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  private resizeWindowSubscription: Subscription;

  constructor(private store: Store<any>) {
    this.resizeWindowSubscription = fromEvent(window, 'resize')
      .pipe(debounce(() => interval(100)))
      .subscribe((event: any) => {
        this.dispatchWindowSize({
          width: event.target.innerWidth,
          height: event.target.innerHeight
        });
      });
  }

  ngOnInit(): void {
    this.dispatchWindowSize({
      width: window.innerWidth,
      height: window.innerHeight
    });
  }

  ngOnDestroy(): void {
    if (!!this.resizeWindowSubscription) {
      this.resizeWindowSubscription.unsubscribe();
    }
  }

  private dispatchWindowSize(size: { width: number; height: number }) {
    this.store.dispatch(AppActions.windowResized(size));
  }
}