import { Component, AfterViewInit, AfterContentInit, Input, OnDestroy, ViewEncapsulation, OnChanges, SimpleChanges } from '@angular/core';
import * as NProgress from 'nprogress';
import { ProgressBarService } from './progress-bar.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'na-progress-bar',
  templateUrl: './progress-bar.component.html',
  styleUrls: ['./progress-bar.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ProgressBarComponent implements OnDestroy, AfterViewInit, AfterContentInit, OnChanges {
  // NProgressConfigureOptions
  @Input() options: any = { parent: '#container', showSpinner: false };
  @Input() set progress(forceShow: boolean) {
    this.progressBarService.progressEmitter.emit(forceShow);
  }
  private progressEmitter$: Subscription;

  constructor(private progressBarService: ProgressBarService) {
    NProgress.configure(this.options);
    this.progressEmitter$ = this.progressBarService.progressEmitter.subscribe(
      (forceShow: boolean) => {
        if (forceShow) {
          NProgress.start();
        } else {
          NProgress.done();
        }
      }
    );
  }

  ngOnDestroy() {
    if (this.progressEmitter$) {
      this.progressEmitter$.unsubscribe();
    }
  }

  ngAfterViewInit() {
  }

  ngAfterContentInit() {
    // NProgress.start();
  }

  ngOnChanges(changes: SimpleChanges): void {
    // console.log(changes['progress']);
  }

}