import { Component, Input, OnDestroy, OnInit } from '@angular/core';

@Component({
  selector: 'spa-update-progress',
  template: `<spf-progress-bar [spfPercentage]="delayedPercentage" [spfTitle]="title | capitalize">
  </spf-progress-bar>`,
})
export class SpaUpdateProgressComponent implements OnInit, OnDestroy {
  @Input() title!: string;
  @Input() percentage!: number;
  delayedPercentage?: number;
  syncTruckInterval?: NodeJS.Timer;
  
  ngOnInit(): void {
    this.startLoaderSync();
  }

  ngOnDestroy(): void {
    this.stopLoaderSync();
  }

  private startLoaderSync() {
    if (this.syncTruckInterval === null) {
      this.syncTruckInterval = setInterval(() => {
        this.delayedPercentage = this.percentage;
      }, 200);
    }
  }

  private stopLoaderSync() {
    if (this.syncTruckInterval !== null) {
      clearInterval(this.syncTruckInterval);
      this.syncTruckInterval = undefined;
    }
  }
}
