import { Component, OnInit, HostListener, Inject } from '@angular/core'
import { Router, NavigationEnd } from '@angular/router'
import { DOCUMENT } from '@angular/common'

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  public isSticky: boolean = false
  public isMenuOpen: boolean = false

  constructor(@Inject(DOCUMENT) private document: Document, private router: Router) {
    router.events.subscribe((val) => {
      this.isMenuOpen = false
      this.isSticky = true
      this.document.body.classList.remove('no-scroll')
    })
  }

  ngOnInit(): void {
  }

  @HostListener('window:scroll', ['$event'])
  onScroll(event) {
    const verticalOffset = window.pageYOffset
          || document.documentElement.scrollTop
          || document.body.scrollTop || 0

    this.isSticky = this.isMenuOpen || verticalOffset > 10
  }

  toggleMenu(): void {
    this.isMenuOpen = !this.isMenuOpen
    if(this.isMenuOpen) {
      this.isSticky = true
      this.document.body.classList.add('no-scroll')
    } else {
      this.document.body.classList.remove('no-scroll')
    }
  }

}