import {
  Component,
  OnDestroy,
  OnInit,
  ViewEncapsulation,
  ChangeDetectorRef,
  ChangeDetectionStrategy,
} from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { MwProgressBarService } from 'projects/core/src//services';

@Component({
  selector: 'mw-progress-bar',
  templateUrl: './progress-bar.component.html',
  styleUrls: ['./progress-bar.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MwProgressBarComponent implements OnInit, OnDestroy {
  bufferValue = 0;
  mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' = 'indeterminate';
  value?: number;
  visible?: boolean;

  private unsubscribeAll$ = new Subject<void>();

  constructor(
    private progressBarService: MwProgressBarService,
    private changeDetectorRef: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    this.progressBarService.bufferValue
      .pipe(takeUntil(this.unsubscribeAll$))
      .subscribe((bufferValue) => {
        this.bufferValue = bufferValue;
      });

    this.progressBarService.mode
      .pipe(takeUntil(this.unsubscribeAll$))
      .subscribe((mode) => {
        this.mode = mode;
      });

    this.progressBarService.value
      .pipe(takeUntil(this.unsubscribeAll$))
      .subscribe((value) => {
        this.value = value;
      });

    this.progressBarService.visible
      .pipe(takeUntil(this.unsubscribeAll$))
      .subscribe((visible) => {
        setTimeout(() => {
          this.visible = visible;
          this.changeDetectorRef.markForCheck();
        }, 0);
      });
  }

  ngOnDestroy(): void {
    this.unsubscribeAll$.next();
    this.unsubscribeAll$.complete();
  }
}