import {ChangeDetectorRef, Component} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {PiwikService} from "src/app/openaireLibrary/utils/piwik/piwik.service";
import {Meta, Title} from "@angular/platform-browser";
import {SEOService} from "src/app/openaireLibrary/sharedComponents/SEO/SEO.service";
import {StakeholderBaseComponent} from "../../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";

@Component({
  selector: 'the-five-monitors',
  templateUrl: 'the-five-monitors.component.html',
  styleUrls: ['the-five-monitors.component.less']
})
export class TheFiveMonitorsComponent extends StakeholderBaseComponent{
  title = 'The 5 Monitors';
  description = 'The 5 Monitors';
  breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - the 5 monitors'}];
  public sections: string[] = ['RPOs', 'RFOs', 'Researchers', 'Repositories'];
  public offset: number;
  public shouldSticky: boolean = true;

  constructor(protected _route: ActivatedRoute,
              protected _piwikService: PiwikService,
              protected _meta: Meta,
              protected seoService: SEOService,
              protected _title: Title,
              protected _router: Router,
              private cdr: ChangeDetectorRef) {
    super();
  }

  ngOnInit() {
    this.setMetadata();
  }

  ngAfterViewInit() {
    if (typeof document !== 'undefined') {
      this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
      this.cdr.detectChanges();
      this.observeBottom();
    }
  }

  private observeBottom() {
    let bottom = document.getElementById('bottom');
    if (bottom) {
      let bottomObs = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          this.shouldSticky = !entry.isIntersecting;
          this.cdr.detectChanges();
        })
      });
      this.subscriptions.push(bottomObs);
      bottomObs.observe(bottom);
    }
  }
}