import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import {MediaMatcher} from '@angular/cdk/layout';

import { share, tap } from 'rxjs/operators';

import { CourseService } from '../services/course.service';
import { LoginService } from '../services/login.service';

import { CourseData } from '../structures/course-data';

import * as CourseFilters from '../courseFilters';

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.scss']
})
export class MainPageComponent implements OnInit {

  ngOnInit(): void {
  }
  
  mobileQuery: MediaQueryList;

  menuOn: boolean = window.innerWidth > 600 ? true : false;

  //nearestFreeSpots: CourseBasicData[] = [];
  // courses: CourseData[] | null = null;
  // myCourses: CourseData[] | null = [];
  myFutureCourses: CourseData[] | null = null;
  // actualYearCourses: CourseData[] | null = [];
  actualYearFutureCourses: CourseData[] | null = null;

  invalidation = 0; // promenna slouzici pro invalidaci dat ve vlozene komponente. Kurzy jsou predavany jako pole a u toho Angular nedetekuje zmeny uvnitr pole.

  private _mobileQueryListener: () => void;

  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, private courseService: CourseService, private loginService: LoginService) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);

    // this.courseService.getNearestFreeSpots().subscribe(
    //   resp => this.afterNearestFreeSpotsLoaded(resp)
    // );
    // this.nearestFreeSpots = this.courseService.nearestFreeSpots;
    //this.courseService.nearestFreeSpotsChange.subscribe(value => {this.afterNearestFreeSpotsLoaded(value)});
    //this.courseService.nearestFreeSpotsChange.pipe(share(), tap(value => this.afterNearestFreeSpotsLoaded(value)));
    // this.courseService.nearestFreeSpotsChange.pipe(share(), tap());
    // this.courseService.actualizeNearestFreeSpots();
    // this.courseService.actualizeNearestFreeSpots().subscribe(
    //   resp => this.afterNearestFreeSpotsLoaded(resp)
    // );

    // this.courseService.courses$.subscribe((courses: CourseData[] | null) => {
    //   this.myCourses = courses;
    //   if(this.myCourses != null) {
    //     this.myFutureCourses = this.myCourses.filter( course => { if(course.dateStart != null) {new Date(course.dateStart).getTime() >= new Date().getTime() }} );
    //   } else {
    //     this.myFutureCourses = null;
    //   }
    //   //this.afterMyCoursesLoaded(courses);
    // })
    // this.courseService.actualizeMyCourses();

    // this.courseService.courses$.subscribe((courses: CourseData[] | null) => {
    //   this.actualYearCourses = courses;
    //   if(this.myFutureCourses != null) {
    //     this.actualYearFutureCourses = this.myFutureCourses.filter( course => { if(course.dateStart != null) {new Date(course.dateStart).getTime() >= new Date().getTime() }} );
    //   } else {
    //     this.actualYearFutureCourses = null;
    //   }
    //   // this.afterActualYearCoursesLoaded(courses)
    // })
    // this.courseService.actualizeActualYearCourses();

    this.courseService.courses$.subscribe((courses: CourseData[] | null) => {
      // if(this.courses != null) {
      //   this.myFutureCourses = this.myCourses.filter( course => { if(course.dateStart != null) {new Date(course.dateStart).getTime() >= new Date().getTime() }} );
      // } else {
      //   this.myFutureCourses = null;
      // }
      if(courses != null) {
        var userData = this.loginService.getActualUserData();
        if(userData != null && userData.instructor != null) {
          this.actualYearFutureCourses = CourseFilters.filterFutureCourses(courses);
          this.myFutureCourses = CourseFilters.filterCoursesByInstructor(this.actualYearFutureCourses, userData.instructor.ID);
        }
      } else {
        this.myFutureCourses = null;
        this.actualYearFutureCourses = null;
      }
      //this.afterMyCoursesLoaded(courses);
      this.invalidation++;
    })
    this.courseService.actualizeMyCourses();
    this.courseService.actualizeActualYearCourses();
  }

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

  // afterMyCoursesLoaded(myCourses: CourseBasicData[] | null): void {
  //   this.myCourses = myCourses;
  //   this.myFutureCourses = this.myCourses.filter( course => new Date(course.dateStart).getTime() >= new Date().getTime() );
  // }

  // afterActualYearCoursesLoaded(courses: CourseBasicData[] | null): void {
  //   this.actualYearCourses = courses;
  //   this.actualYearFutureCourses = this.actualYearCourses.filter( course => new Date(course.dateStart).getTime() >= new Date().getTime() );
  // }


}
