import { Component, OnDestroy } from '@angular/core';
import { ProjectService } from './_services/project.service';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { filter, map, switchMap } from 'rxjs/operators';
import { Subscription } from 'rxjs';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnDestroy {
  private _projectIdSub: Subscription;
  title = 'project-management';
  constructor(
    router: Router,
    activatedRoute: ActivatedRoute,
    private projectService: ProjectService) {
    this._projectIdSub = router.events
      .pipe(
        filter((ev) => ev instanceof NavigationEnd),
        map(() => {
          let route = activatedRoute;
          while (route.firstChild) {
            route = route.firstChild;
          }
          return route;
        }),
        switchMap((r) => r.params),
        map((prms) => prms.projectId && parseInt(prms.projectId, 10)),
      ).subscribe((id) => {
        this.projectService.currentProjectId = id;
      });
    activatedRoute.params.subscribe((p) => console.log(p));
  }

  ngOnDestroy() {
    this._projectIdSub.unsubscribe();
  }


  get projectId(): number {
    return this.projectService.currentProjectId;
  }


}