import {Component, HostListener, Inject, OnInit} from '@angular/core';
import {NavigationEnd, NavigationStart, Router} from '@angular/router';
import {LoginService} from './services/app-user-service/login-service';
import {PromotionService} from './services/army-management/promotion.service';
import {AwardingService} from './services/army-management/awarding.service';
import {RouteConfig} from './app.config';
import {DOCUMENT} from '@angular/common';
import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material';
import {SpinnerService} from './services/user-interface/spinner/spinner.service';

declare function require(url: string);

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css', 'style/load-indicator.css']
})
export class AppComponent implements OnInit {

  config = RouteConfig;

  loading = false;

  sidebarOpen = true;

  showSidebarToggleBtn = false;

  scrollTopVisible = false;

  scrollBtnVisibleVal = 100;

  leftBackground;

  leftBoxShadow;

  // a map of svgIcon names and associated svg file names
  // to load from assets/icon folder
  svgIcons = {
    'add': 'outline-add_box-24px',
    'add-user': 'twotone-person_add-24px',
    'edit': 'twotone-edit-24px',
    'delete': 'twotone-delete-24px',
    'stats-detail': 'round-assessment-24px',
    'chevron-left': 'baseline-chevron_left-24px',
    'chevron-right': 'baseline-chevron_right-24px'
  };

  version = 'v'.concat(require('./../../../package.json').version);

  constructor(public loginService: LoginService,
              private promotionService: PromotionService,
              private awardingService: AwardingService,
              private router: Router,
              private iconRegistry: MatIconRegistry,
              private sanitizer: DomSanitizer,
              private spinnerService: SpinnerService,
              @Inject(DOCUMENT) private document) {
    this.initMaterialSvgIcons();

    this.spinnerService.spinnerActive.subscribe(active => this.toggleSpinner(active));

    router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.spinnerService.activate();
      }
      if (event instanceof NavigationEnd) {
        this.spinnerService.deactivate();
        const currentUrl = this.router.url;

        // scroll to top on route from army overview to user detail and back
        if (currentUrl.includes('/overview')) {
          this.scrollToTop();
        }

        // show sidebar menu on initial page access
        this.sidebarOpen = true;
        this.showSidebarToggleBtn = currentUrl.includes('/stats');

        // remove sidebar styling for components that are rendered inside,
        // but not really shown as sidebar (legacy)
        if (currentUrl.includes('/login') ||
          currentUrl.includes('/signup') ||
          currentUrl.endsWith('/404')) {
          this.leftBackground = 'none';
          this.leftBoxShadow = 'none';
        } else {
          this.leftBackground = '#f9f9f9';
          this.leftBoxShadow = '2px 1px 5px grey';
        }
      }
    });
  }

  toggleSpinner(active) {
    this.loading = active;
  }

  initMaterialSvgIcons() {
    Object.keys(this.svgIcons).forEach(key => {
      const fileUri = '../assets/icon/'.concat(this.svgIcons[key])
                                       .concat('.svg');
      this.iconRegistry.addSvgIcon(key, this.sanitizer.bypassSecurityTrustResourceUrl(fileUri));
    });
  }

  @HostListener('window:scroll', [])
  onWindowScroll() {
    this.scrollTopVisible = document.body.scrollTop > this.scrollBtnVisibleVal
      || document.documentElement.scrollTop > this.scrollBtnVisibleVal;
  }

  toggleSidebar() {
    this.sidebarOpen = !this.sidebarOpen;
    setTimeout(_ => {
      window.dispatchEvent(new Event('resize'));
    });
  }

  ngOnInit() {
    if (this.loginService.hasPermission(2)) {
      const fraction = this.loginService.getCurrentUser().squad.fraction;
      this.promotionService.checkUnconfirmedPromotions(fraction);
      this.awardingService.checkUnprocessedAwards(fraction);
    }
  }

  logout() {
    this.loginService.logout();
    setTimeout(() => {
      this.router.navigate([RouteConfig.overviewPath]);
    }, 500);
  }

  scrollToTop() {
    this.document.body.scrollTop = 0; // For Safari
    this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
  }
}