import {Component, Input} from '@angular/core';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';

@Component({
  selector: 't-breakpoint-overlay',
  templateUrl: './breakpoint-overlay.component.html',
  styleUrls: ['./breakpoint-overlay.component.scss']
})
export class BreakpointOverlayComponent {
  @Input('icon') icon: string;
  @Input('styleClass') styleClass: string;
  @Input('contentActivated') contentActivated = false;

  $breakpoint: Observable<boolean>;

  constructor(breakpointObserver: BreakpointObserver) {
    // Breakpoint observable to switch the view to small handset view
    this.$breakpoint = breakpointObserver.observe(
      [Breakpoints.Small, Breakpoints.HandsetPortrait]
    ).pipe(
      map(state => state.matches)
    );
  }

}