import {AfterViewInit, Component, ElementRef, EventEmitter, 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" [attr.uk-sticky]="shouldSticky?'media: @m':null" [attr.offset]="shouldSticky?offset:null">
          <div class="uk-container uk-container-large uk-padding-remove-vertical">
            <div class="uk-padding-small uk-padding-remove-vertical">
              <ng-content select="[header]"></ng-content>
            </div>
          </div>
        </div>
      </div>
      <div id="page_content_inner" class="uk-container uk-container-large">
        <div class="uk-padding uk-padding-remove-vertical">
          <ng-content select="[inner]"></ng-content>
        </div>
      </div>
    </div>
  `,
})
export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
  public offset: number;
  public sticky: boolean = false;
  public shouldSticky: boolean = true;
  @Output()
  public stickyEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
  private observer: IntersectionObserver;
  private subscriptions: any[] = [];
  
  constructor() {
  }
  
  ngOnInit() {
    if (typeof document !== "undefined") {
      this.initSticky();
    }
  }
  
  ngAfterViewInit() {
    if(typeof document !== "undefined") {
      let bottom = document.getElementById('bottom');
      if(bottom) {
        this.observer = new IntersectionObserver(entries => {
          entries.forEach(entry => {
            this.shouldSticky = !entry.isIntersecting;
            this.initSticky();
          })
        });
        this.observer.observe(bottom);
      }
    }
  }
  
  initSticky() {
    this.clear();
    if(this.shouldSticky) {
      this.subscriptions.push(UIkit.util.on(document, 'active', '#sticky-menu', () => {
        this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
      }));
      this.subscriptions.push(UIkit.util.on(document, 'inactive', '#sticky-menu', () => {
        this.offset = 0;
      }));
      this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', () => {
        this.sticky = true;
        this.stickyEmitter.emit(this.sticky);
      }));
      this.subscriptions.push(UIkit.util.on(document, 'inactive', '#page_content_header', () => {
        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();
    if(this.observer) {
      this.observer.disconnect();
    }
  }
}