import {Component, ElementRef, HostListener, Input, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'app-semi-fixed-header',
  templateUrl: './semi-fixed-header.component.html',
  styleUrls: ['./semi-fixed-header.component.scss']
})
export class SemiFixedHeaderComponent implements OnInit {
  @Input() header: string|undefined;
  @Input('fixed-at') fixedAt: number|undefined;
  @ViewChild('headerContainer') public headerContainer: ElementRef | undefined;
  public headerInScrollMode = false;

  constructor() { }

  ngOnInit(): void {
  }

  @HostListener('window:scroll', ['$event']) // for window scroll events
  public onScroll($event: Event): void {
    if (this.headerContainer) {
      const elemTop = this.headerContainer.nativeElement.getBoundingClientRect().top;
      this.headerInScrollMode = elemTop <= (this.fixedAt || 0);
    }
  }
}