import {
  AfterViewInit,
  ChangeDetectorRef,
  Component,
  ElementRef,
  Inject,
  Input,
  OnDestroy,
  OnInit,
  PLATFORM_ID,
  ViewChild
} from "@angular/core";
import {LayoutService} from "../sidebar/layout.service";

declare var UIkit;
declare var ResizeObserver;

@Component({
  selector: '[page-content]',
  template: `
    <div id="page_content">
      <div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer
           class="uk-tile-default uk-blur-background">
        <div class="uk-container uk-container-large">
          <div class="uk-padding-small uk-padding-remove-vertical">
            <ng-content select="[sticky_footer]"></ng-content>
          </div>
        </div>
      </div>
      <div id="page_content_header" #header class="uk-blur-background"
           [attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
        <div class="uk-container uk-container-large">
          <div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
            <div class="header">
              <ng-content select="[header]"></ng-content>
            </div>
          </div>
        </div>
      </div>
      <div id="page_content_actions" #actions class="uk-blur-background">
        <div class="uk-container uk-container-large">
          <div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
            <div class="actions">
              <ng-content select="[actions]"></ng-content>
            </div>
          </div>
        </div>
      </div>
      <div id="page_content_inner" class="uk-container uk-container-large">
        <div class="uk-padding-small uk-padding-remove-vertical">
          <ng-content select="[inner]"></ng-content>
        </div>
      </div>
      <div id="page_content_footer" #footer>
        <div class="uk-container uk-container-large">
          <div class="uk-padding-small uk-padding-remove-vertical">
            <ng-content select="[footer]"></ng-content>
          </div>
        </div>
      </div>
    </div>
  `,
})
export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
  @Input()
  public headerSticky: boolean = false;
  public offset: number;
  public shouldSticky: boolean = true;
  @ViewChild('header') header: ElementRef;
  @ViewChild('actions') actions: ElementRef;
  public footer_height: number = 0;
  @ViewChild("sticky_footer") sticky_footer: ElementRef;
  private sticky = {
    header: null,
    footer: null
  }
  subscriptions = [];

  constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef,
              @Inject(PLATFORM_ID) private platformId) {
  }

  ngOnInit() {
    if (typeof document !== "undefined") {
      this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
      this.stickyBugWorkaround();
    }
  }

  get isBrowser() {
    return this.platformId === 'browser';
  }

  get isStickyActive() {
    return this.sticky.header?.isActive;
  }

  ngAfterViewInit() {
    if (typeof document !== "undefined") {
      this.observeStickyFooter();
      if (this.shouldSticky && typeof document !== 'undefined') {
        this.sticky.header = UIkit.sticky((this.headerSticky ? this.header.nativeElement : this.actions.nativeElement), {
          media: '@m',
          offset: this.offset
        });
      }
      if (this.sticky_footer) {
        let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
        this.sticky.footer = UIkit.sticky(this.sticky_footer.nativeElement, {bottom: true, offset: footer_offset});
      }
    }
  }

  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
        subscription.disconnect();
      }
    });
  }


  /**
   * Workaround for sticky not update bug when sidebar is toggled.
   * TODO when UIKit will be updated => remove
   *
   * */
  stickyBugWorkaround() {
    let sidebarOffset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-width')) -
      Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-mini-width'));
    let transitionDelay = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-transition-delay')) * 1000;
    this.subscriptions.push(this.layoutService.isOpen.subscribe(isOpen => {
      if (this.sticky.header) {
        if (isOpen) {
          this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) - sidebarOffset + 'px';
        } else {
          this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) + sidebarOffset + 'px';
        }
        setTimeout(() => {
          this.sticky.header.$emit();
        }, transitionDelay);
      }
      if (this.sticky.footer) {
        if (isOpen) {
          this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) - sidebarOffset + 'px';
        } else {
          this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) + sidebarOffset + 'px';
        }
        setTimeout(() => {
          this.sticky.footer.$emit();
        }, transitionDelay);
      }
      this.cdr.detectChanges();
    }));
  }

  /**
   * @deprecated
   *
   * Should be smooth
   *
   * */
  private observeBottom() {
    let bottom = document.getElementById('bottom');
    if (bottom) {
      let bottomObs = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          this.shouldSticky = !entry.isIntersecting;
        })
      });
      this.subscriptions.push(bottomObs);
      bottomObs.observe(bottom);
    }
  }

  /**
   * @deprecated
   * */
  private observeHeader() {
    if (this.header) {
      let headerObs = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.boundingClientRect.height > 0) {
            this.layoutService.setReplaceHeader(!entry.isIntersecting);
          }
        })
      });
      this.subscriptions.push(headerObs);
      headerObs.observe(this.header.nativeElement);
    }
  }

  private observeStickyFooter() {
    if (this.sticky_footer) {
      let resizeObs = new ResizeObserver(entries => {
        entries.forEach(entry => {
          setTimeout(() => {
            this.sticky.footer.offset = this.calcStickyFooterOffset(entry.target);
            this.cdr.detectChanges();
          });
        })
      });
      this.subscriptions.push(resizeObs);
      resizeObs.observe(this.sticky_footer.nativeElement);
    }
  }

  calcStickyFooterOffset(element) {
    this.footer_height = element.offsetHeight;
    return window.innerHeight - this.footer_height;
  }
}