import { Component, ViewChild } from '@angular/core';
import { NavigationPanelService } from 'src/services/navigationPanel/navigation-panel.service';
import { Router } from '@angular/router';
import { DataService } from 'src/services/data/data.service';

@Component({
  selector: 'app-journal-home',
  templateUrl: './journal-home.component.html',
  styleUrls: ['./journal-home.component.scss'],
})
export class JournalHomeComponent {
  public constructor(
    public navigation: NavigationPanelService,
    private router: Router,
    private dataAccessor: DataService
  ) {}

  @ViewChild('tabbar') tabbar: any;

  private isNavigationOpen: boolean = false;

  ngOnInit() {
    const width = window.innerWidth;
    this.navigation.showNavigationPanel$.subscribe((state) => {
      this.isNavigationOpen = state;
    });

    window.addEventListener('mousemove', (event) => {
      if (event.clientX < 10 && !this.isNavigationOpen) {
        this.navigation.openNavigation();
      }
    });

    window.addEventListener('mousemove', (event) => {
      if (event.clientX > width / 4 && this.isNavigationOpen) {
        this.navigation.closeNavigation();
      }
    });
  }

  // If any container is too close to the bottom of the screen, the navbar is hidden.
  public hideTabbar(): boolean {
    if (this.router.url === '/journal/stats') {
      const element = document.getElementsByClassName('stats-container')[0];
      const rect = element!.getBoundingClientRect();
      const distanceToBottom = window.innerHeight - rect.bottom;
      const threshhold = 4.5 * 15.5;
      if (distanceToBottom < threshhold) {
        return true;
      } else {
        return false;
      }
    } else {
      return false;
    }
  }

  public onNavigationUpdated(tab: number) {
    this.tabbar.active = tab;
  }
}
