import {Component, Inject} from '@angular/core';
import {MatIcon} from "@angular/material/icon";
import {MatProgressBar} from "@angular/material/progress-bar";
import {MAT_SNACK_BAR_DATA, MatSnackBarRef} from "@angular/material/snack-bar";
import {MatIconButton} from "@angular/material/button";

@Component({
  selector: 'app-notification',
  standalone: true,
  imports: [
    MatIconButton,
    MatIcon,
    MatProgressBar
  ],
  templateUrl: './notification.component.html',
  styleUrl: './notification.component.css'
})

export class NotificationComponent {
  showProgressBar: boolean = false;
  progress: number = 100;
  color: string = "primary";

  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any, private snackBarRef: MatSnackBarRef<NotificationComponent>) {
    if (data.duration) {
      this.startProgress(data.duration);
      this.showProgressBar = true;
    }
    if (data.color) {
      this.color = data.color;
    }
  }

  dismiss(): void {
    this.snackBarRef.dismiss();
  }

  private startProgress(duration: number): void {
    const interval: number = duration / 100;
    const progressInterval = setInterval(() => {
      this.progress--;
      if (this.progress === 0) {
        clearInterval(progressInterval);
        setTimeout(() => {
          this.dismiss();
        }, 1000);
      }
    }, interval);
  }
}