/*import { Component } from '@angular/core';*/
import { Http, Headers } from '@angular/http';
import { AppState } from '../app.service';
import { HomeService } from './home.service';
import { CourseComponent } from '../course';
import { Course } from '../course/course.service';

import { ActivatedRoute, Params, Router } from '@angular/router';

import { User } from '../user/user/user.service';

import { AppStore } from '../app.store';
import { Thread, ThreadService } from '../thread/thread.service';
import { CourseService } from '../course/course.service';
import { ForumService, Forum } from '../forum/forum.service';
import { APIService } from '../shared/services/api.service';
import * as _ from 'underscore'

import {Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
import {DataSource} from '@angular/cdk/collections';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import { MatPaginator } from '@angular/material';

import { AppDataSource } from '../shared/services/data.service';

@Component({
  selector: 'home',
  //encapsulation: ViewEncapsulation.None,
  styleUrls: [ './home.component.scss' ],
  templateUrl: './home.component.html'
})
export class HomeComponent {
  // Set our default values
  
  public user: User;
  private myCourses : Course[] = [];
  private myForums : Forum[] = [];
  public threads : Thread[] = [];
  public courses: Array<Course> = null;
  public faculties : Array<any>;
  public groupedCourses: Array<any>;
  public displayMode : string = 'accordion';
  public state;
  
  matButtonToggleGroup : string = 'list';

  constructor(private api : APIService, private forumService : ForumService, private courseService : CourseService, public service: HomeService, public appState : AppState, public router: Router , public route: ActivatedRoute , public store : AppStore, public threadService : ThreadService) {

  }

  ngOnInit() {
    let self = this;
    this.store
      .changes
      .pluck('user')
      .filter((user: User) => user !== undefined && user !== null)
      .subscribe((user: User) => {
        this.user = user;
        this.route.data.forEach((data) => {
          this.faculties = data.institution.faculties;
            })
        })
        this.api.findMany({participants : user._id}, 'course')
          .subscribe(courses => {
            this.myCourses = courses;
          })
        this.api.findMany({parent_id : {$in : user.courses}}, 'forum')
          .subscribe(forums => {
            this.myForums = forums;
          })
        this.api.findMany({child_to : {$in : user.courses}}, 'thread')
          .subscribe((threads: Array<Thread>) => {
            this.threads = threads;
          })
      })
    
  }
  setDisplayMode(mode:string):void{
    this.displayMode = mode;
  }
  navigateToCourse(course : Course) {
    if(course['subscribed']) this.router.navigate(['/course', course._id]);
  }
}
          this.api.findMany({parent_id : data.institution}, 'course')
            .subscribe((courses : Course[]) => {              this.courses = courses;