import { Directive, HostBinding, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { ResponsiveService } from './responsive.service';
import { ScreenSize } from './screen-size.model';

@Directive({
  selector: '[utResponsive]'
})
export class ResponsiveDirective implements OnInit, OnDestroy {
  @HostBinding('class.desktop')
  public isDesktop = false;
  @HostBinding('class.tablet')
  public isTablet = false;
  @HostBinding('class.tablet-sm')
  public isSmallTablet = false;
  @HostBinding('class.mobile')
  public isMobile = false;

  private destroyed$ = new Subject<any>();

  constructor(private responsiveService: ResponsiveService) {}

  ngOnInit(): void {
    this.responsiveService.currentScreenSize$
      .pipe(
        filter(size => !!size),
        takeUntil(this.destroyed$)
      )
      .subscribe((size: ScreenSize) => {
        this.isMobile = size === ScreenSize.MOBILE;
        this.isSmallTablet = size === ScreenSize.TABLET_SM;
        this.isTablet = size === ScreenSize.TABLET;
        this.isDesktop = size === ScreenSize.DESKTOP;
      });
  }

  public ngOnDestroy(): void {
    this.destroyed$.next();
    this.destroyed$.complete();
  }
}