import { Component } from '@angular/core';

import { Notification } from '../models/notification.model';
import { NotificationsService } from './notifications.service';

@Component({
  selector: 'tb-notifications',
  templateUrl: './notifications.component.html'
})
export class NotificationsComponent {
  public notes: Notification[];

  constructor(public notifications: NotificationsService) {
    this.notes = new Array<Notification>();

    notifications.noteAdded
      .subscribe(note => {
        this.notes.push(note);
        setTimeout(() => { this.hide.bind(this)(note); }, 3000);
      });
  }

  hide(note: Notification): void {
    const index = this.notes.indexOf(note);

    if (index >= 0) {
      note.type += ' clicked';

      setTimeout(() => {
        this.notes.splice(index, 1);
      }, 500); // 500ms is the fade out transition time
    }
  }
}

