import { Component, OnInit, OnDestroy } from '@angular/core';
import {
  Router,
  ActivatedRoute,
  NavigationEnd,
  RouterEvent,
} from '@angular/router';
import { TaskViewService } from './task-view.service';
import { interval, Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-task-view',
  templateUrl: './task-view.component.html',
  styleUrls: ['./task-view.component.css'],
})
export class TaskViewComponent implements OnInit, OnDestroy {
  task: any;
  dict: any;
  taskID: any;
  customerTextActive = true;
  inhouseTextActive = false;
  keywordsActive = false;
  relatedTasksActive = false;
  taskStatus: string;
  taskTimerSubscription: any;
  /**
   * [Subject]{@link https://rxjs-dev.firebaseapp.com/guide/subject} is a
   * special type of observable.  It's being used to detect when this, component
   * is destroyed/exited to ensure that the Router events subscription is 
   * canceled when at that time.
   */
  destroyed = new Subject<any>();

  /**
   */
  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private taskViewService: TaskViewService
  ) { }

  ngOnInit(): void {
    // Subscribe to task refresh events.
    this.taskStatusSubscr();

    // Get parameters from task url.
    this.route.queryParams.subscribe((params) => (this.taskID = params.taskid));

    // Get task and dictionary data from task service.
    this.getTask();
    this.taskViewService.getDict().subscribe((dict) => (this.dict = dict));
  }

  /**
   * This function sets up a subscription for task status changes.
   * 
   * This code was adapted from:
   * [Angular: Refetch data on same URL navigation]{@link https://medium.com/angular-in-depth/refresh-current-route-in-angular-512a19d58f6e}.
   * <br>
   * Note there's a slightly simpler solution here:
   * [Reloading current route in Angular 5 / Angular 6 / Angular 7]{@link https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2}.
   * <br>
   * It would be interesting to know if this simpler solution is equivalent to
   * the first solution.
   * 
   * According to the article and my anecdotal experience, by default,
   *    the router doesn’t emit for events where we are trying to navigate to
   *    the same URL that is already activated.
   * 
   * Both of these solutions depend on:
   * <ol>
   *   <li>The Router Module's [onSameUrlNavigation]{@link https://angular.io/api/router/ExtraOptions#onSameUrlNavigation}
   *     parameter being set to 'reload'
   *   </li>
   *   <li>Your route's [runGuardsAndResolvers]{@link https://angular.io/api/router/Route#runGuardsAndResolvers}
   *     property being set to 'always'
   *   </li>
   * </ol>
   * 
   * The solution watches for
   * [NavigationEnd]{@link https://angular.io/api/router/NavigationEnd} events
   * then calls <code>this.refreshTask()</code> when one is found.
   * 
   * It stops watching when
   * [takeUntil]{@link https://www.learnrxjs.io/learn-rxjs/operators/filtering/takeuntil}
   * is provided an observable emit from <code>this.destroyed</code>.
   */
  taskStatusSubscr(): void {
    this.router.events
      .pipe(
        // filter out all router events except for 
        filter((event: RouterEvent) => event instanceof NavigationEnd),
        takeUntil(this.destroyed)
      )
      // fetch task data when a NavigationEnd event occurs
      .subscribe(() => {
        this.refreshTask();
      });
  }

  setTaskStatus(val: number) {
    if (val === 0) {
      this.taskStatus = 'pending';
    } else {
      this.taskStatus = 'expired';
    }
  }

  /**
   * Timer for determining when the task status badge needs to change color to
   * indicate task "staleness."
   * 
   * This function makes use of these RxJS features:
   * <ul>
   *  <li>[interval]{@link https://rxjs-dev.firebaseapp.com/api/index/function/interval} function</li>
   *  <li>[Subscription]{@link https://rxjs-dev.firebaseapp.com/api/index/class/Subscription} class</li>
   * </ul>
   */
  startTaskTimer(): void {
    const source = interval(60000);
    // when the time subscription emits (a number), the task status is updated
    this.taskTimerSubscription = source.subscribe((val: number) =>
      this.setTaskStatus(val)
    );
  }

  /**
   * Get task data from task-view service.
   */
  getTask(): void {
    this.taskStatus = 'active';
    this.taskViewService.getTask(this.taskID).subscribe((task) => {
      this.task = task;
      // timer to indicate whether or not the task should be refreshed
      this.startTaskTimer();
    });
  }

  /**
   * Returns the tech name for the task's site's tech id.
   * @returns One of: M-AT, FS, $T, etc.
   */
  getTechName(): string {
    return this.dict.DAmsTechnologies.filter(
      (tech: any) => tech.ID === this.task.AmsTaskMain.TechnologyID
    )[0].Name;
  }

  /**
   * Called by related tasks component to switch task viewed.
   */
  onTaskSelected(taskid: number): void {
    this.taskID = taskid;
    this.haltTaskTimer();
    this.getTask();
  }

  getTaskStatus(): string {
    return this.taskStatus;
  }

  haltTaskTimer(): void {
    this.taskTimerSubscription.next();
    this.taskTimerSubscription.complete();
  }

  refreshTask(): void {
    this.haltTaskTimer();
    this.getTask();
  }

  /**
   * Stop subscribing to router events.
   * 
   * <code>this.destroyed</code> emits to <code>takeUntil</code> thus ending the
   * subscription to route events
   */
  ngOnDestroy(): void {
    this.destroyed.next();
    this.destroyed.complete();
  }
}