import { Component, Input, ElementRef, ChangeDetectorRef} from '@angular/core';
import { Subscription } from 'rxjs';
import {filter} from 'rxjs/operators';
import { Router, NavigationEnd } from '@angular/router';
import {MatSnackBar} from '@angular/material/snack-bar';
import {MediaMatcher} from '@angular/cdk/layout';

import { LoginService } from './services/login.service';
import { CourseService } from './services/course.service';
import { InstructorService } from './services/instructor.service';
import { UrlService } from './services/url.service';

import { InstructorData } from './structures/instructor-data';
import { SchoolData } from './structures/school-data';
import { LoggedUserData } from './structures/logged-user-data';
import { emptyInstructorDataFactory } from './empty-objects/empty-instructor-data';

import * as Globals from './globals';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'isod';

  userData: LoggedUserData | null = null;
  // schoolData: SchoolData | null = null;

  mobileQuery: MediaQueryList;
  private _mobileQueryListener: () => void;

  pages = Globals.pages;

  menuOn: boolean = window.innerWidth > 600 ? true : false;
  menuEnabled: boolean = Globals.pagesWithoutMenu.includes(this.router.url) == false;
  menuItems = Globals.getMenuItems('none');

  constructor(private loginService: LoginService, private courseService: CourseService, private instructorService: InstructorService, private urlService: UrlService, 
              private router: Router, private snackBar: MatSnackBar, private elementRef:ElementRef, changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);

    router.events.pipe(
        filter(event => event instanceof NavigationEnd)
      ).subscribe(event => {
          this.menuEnabled = Globals.pagesWithoutMenu.includes(this.router.url) == false
    });

    this.loginService.userData$.subscribe((data: LoggedUserData | null) => {
      this.userData = data;
      this.menuItems = Globals.getMenuItems('');
      if(this.userData != null) {
        if(this.userData.logged == 'instructor' && this.userData.instructor != null) {
          this.menuItems = Globals.getMenuItems(this.userData.instructor.role);
        }
        if(this.userData.logged == 'school' && this.userData.school != null) {
          this.menuItems = Globals.getMenuItems('skola');
        }
      }
    })

    this.loginService.actualizeUserData();

  }


  ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }

  logOut(): void {
    var result = this.loginService.logOut().subscribe(
      resp => this.afterLogOut(resp)
    );
  }

  afterLogOut(response: any): void {
    this.loginService.clearUserData();
    this.courseService.clearAll();
    this.instructorService.clearAll();
    this.snackBar.open('Odhlášení bylo úspěšné', 'x', {duration: Globals.snackbarSuccessTime, panelClass:'snackBarSuccess'});
    this.router.navigate(['/']);
  }
}
