import { Component, Input, OnInit } from '@angular/core';
import { Toast } from './toast.interface';
import { ToasterService } from '../../core/services/toaster.service';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-toaster-container',
  template: `
    <app-toaster *ngFor="let toast of toasts; let i=index" 
      [toast]="toast" [i]="i"
      (remove)="remove($event)"></app-toaster>
  `,
  styleUrls: []
})
export class ToasterContainerComponent implements OnInit {
  toasts: Toast[] = [];
  constructor(private toaster: ToasterService) {}

  ngOnInit() {
    this.toaster.toast$
      .subscribe(toast => {
        this.toasts = [toast, ...this.toasts];
        setTimeout(() => this.toasts.pop(), toast.delay || 5000);
      });
      this.toasts = [];
  }

  ngOnDestroy() {
    // this.toaster.toast$.unsubscribe();
  }

  remove(index: number) {
    this.toasts = this.toasts.filter((v, i) => i !== index);
    //this.toasts.splice(index, 1);
  }

}
