import {Injectable} from "@angular/core";
import {BehaviorSubject, Observable, Subscriber} from "rxjs";
import {ActivationStart, Router} from "@angular/router";

@Injectable({
  providedIn: 'root'
})
export class LayoutService {
  
  public static HEADER_HEIGHT = '65px';
  
  /**
   * Set this to true when sidebar items are ready.
   */
  private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  
  /**
   *  Add hasSidebar: false on data of route config, if sidebar is not needed.
   */
  private hasSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  
  /**
   *  Add hasHeader: false on data of route config, if header is not needed.
   */
  private hasHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  
  /**
   *  Add hasAdminMenu: true on data of route config, if global sidebar should be used.
   */
  private hasAdminMenuSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  /**
   *  Add isFrontPage: true on data of route config, if current route is for front page.
   */
  private isFrontPageSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  /**
   *  Add isSmallScreen: true on data of route config, if screen is small.
   */
  private isSmallScreenSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  /**
   *  Add hasQuickContact: false on data of route config, if the quick-contact fixed button is not needed.
   */
	private hasQuickContactSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
  /**
   *  Add activeMenuItem: string on data of route config, if page should activate a specific MenuItem and route url does not match.
   */

  private activeMenuItemSubject: BehaviorSubject<string> = new BehaviorSubject<string>("");
  
  /**
   *  Change to true will replace your Nav Header with the replaceHeader of your object.
   *  Be sure that replaceHeader exists.
   */
  private replaceHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  private observer: IntersectionObserver;
  sub: any;
  
  ngOnDestroy() {
    this.clearSubscriptions();
  }
  
  clearSubscriptions() {
    if (this.sub instanceof Subscriber) {
      this.sub.unsubscribe();
    }
  }
  
  constructor(private router: Router) {
    this.sub = this.router.events.subscribe(event => {
      if (event instanceof ActivationStart) {
        this.setReplaceHeader(false);
        let data = event.snapshot.data;
        if (data['hasSidebar'] !== undefined &&
          data['hasSidebar'] === false) {
          this.setHasSidebar(false);
        } else {
          this.setHasSidebar(true);
        }
        if (data['hasHeader'] !== undefined &&
          data['hasHeader'] === false) {
          this.setHasHeader(false);
          if(typeof document !== "undefined") {
            document.documentElement.style.setProperty('--header-height', '0');
          }
        } else {
          this.setHasHeader(true);
          if(typeof document !== "undefined") {
            document.documentElement.style.setProperty('--header-height', LayoutService.HEADER_HEIGHT);
          }
        }
        if (data['hasAdminMenu'] !== undefined &&
          data['hasAdminMenu'] === true) {
          this.setHasAdminMenu(true);
        } else {
          this.setHasAdminMenu(false);
        }
        if (data['isFrontPage'] !== undefined &&
          data['isFrontPage'] === true) {
          this.setFrontPage(true);
        } else {
          this.setFrontPage(false);
        }
        if (data['isSmallScreen'] !== undefined &&
          data['isSmallScreen'] === true) {
          this.setSmallScreen(true);
        } else {
          this.setSmallScreen(false);
        }
				if (data['hasQuickContact'] !== undefined &&
          data['hasQuickContact'] === false) {
          this.setHasQuickContact(false);
        } else {
          this.setHasQuickContact(true);
        }
        if (data['activeMenuItem'] !== undefined &&
          data['activeMenuItem'] !== null) {
          this.setActiveMenuItem(data['activeMenuItem']);
        } else {
          this.setActiveMenuItem('');
        }
      }
    });
  }
  
  get open(): boolean {
    return this.openSubject.getValue();
  }
  
  setOpen(value: boolean) {
    this.openSubject.next(value);
  }
  
  get hasSidebar(): Observable<boolean> {
    return this.hasSidebarSubject.asObservable();
  }
  
  setHasSidebar(value: boolean) {
    this.hasSidebarSubject.next(value);
  }
  
  get hasHeader(): Observable<boolean> {
    return this.hasHeaderSubject.asObservable();
  }
  
  setHasHeader(value: boolean) {
    this.hasHeaderSubject.next(value);
  }
  
  
  get hasAdminMenu(): Observable<boolean> {
    return this.hasAdminMenuSubject.asObservable();
  }
  
  setHasAdminMenu(value: boolean) {
    this.hasAdminMenuSubject.next(value);
  }
  
  get isFrontPage(): Observable<boolean> {
    return this.isFrontPageSubject.asObservable();
  }
  
  setFrontPage(value: boolean) {
    this.isFrontPageSubject.next(value);
  }
  
  get replaceHeader(): Observable<boolean> {
    return this.replaceHeaderSubject.asObservable();
  }
  
  setReplaceHeader(value: boolean) {
    this.replaceHeaderSubject.next(value);
  }
  
  get isSmallScreen(): boolean {
    return this.isSmallScreenSubject.getValue();
  }
  
  setSmallScreen(value: boolean) {
    this.isSmallScreenSubject.next(value);
  }

	get hasQuickContact(): Observable<boolean> {
		return this.hasQuickContactSubject.asObservable();
	}

	setHasQuickContact(value: boolean) {
		this.hasQuickContactSubject.next(value);
	}

  get activeMenuItem(): string {
    return this.activeMenuItemSubject.getValue();
  }

  setActiveMenuItem(value: string) {
    this.activeMenuItemSubject.next(value);
  }
}