import {Component, ElementRef, EventEmitter, HostListener, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
import {Subscription} from "rxjs";

declare var UIkit;

@Component({
  selector: '[page-content]',
  template: `
    <div id="page_content">
      <div id="header">
        <div id="page_content_header" uk-sticky="media: @m" [attr.offset]="offset">
          <div #header class="uk-container uk-container-large uk-padding-remove-vertical">
            <ng-content select="[header]"></ng-content>
          </div>
        </div>
      </div>
      <div id="page_content_inner" class="uk-section uk-padding-remove-top uk-container uk-container-large">
        <ng-content select="[inner]"></ng-content>
      </div>
    </div>
  `,
})
export class PageContentComponent implements OnInit, OnDestroy {
  public offset: number;
  public sticky: boolean = false;
  @Output()
  public stickyEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
  @ViewChild("header") public header: ElementRef;
  private current;
  private subscriptions: any[] = [];
  
  constructor() {
  }
  
  ngOnInit() {
    if (typeof window !== "undefined") {
      this.current = window.pageYOffset;
      this.initSticky();
    }
  }
  
  initSticky() {
    this.clear();
    this.subscriptions.push(UIkit.util.on(document, 'active', '#sticky-menu', (): void => {
      this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
  
    }));
    this.subscriptions.push(UIkit.util.on(document, 'inactive', '#sticky-menu', (): void => {
      this.offset = 0;
    }));
    this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', (): void => {
      this.sticky = true;
      this.stickyEmitter.emit(this.sticky);
    }));
    this.subscriptions.push(UIkit.util.on(document, 'inactive', '#page_content_header', (): void => {
      this.sticky = false;
      this.stickyEmitter.emit(this.sticky);
    }));
  }
  
  clear() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      } else if (subscription instanceof Function) {
        subscription();
      }
    });
  }
  
  ngOnDestroy() {
    this.clear();
  }
}