import { Component, Input, Output, EventEmitter } from '@angular/core';

import { Ng2vToastData } from './toasty.service';

/**
 * A Toast component shows message with title and close button.
 */
@Component({
  selector: 'ng2v-toast',
  template: `
      <div class="toast" [ngClass]="[toast.type, toast.theme]">
          <div *ngIf="toast.showClose" class="close-button" (click)="close($event)"></div>
          <div *ngIf="toast.title || toast.msg" class="toast-text">
              <span *ngIf="toast.title" class="toast-title" [innerHTML]="toast.title | safeHtml"></span>
              <br *ngIf="toast.title && toast.msg" />
              <span *ngIf="toast.msg" class="toast-msg" [innerHtml]="toast.msg | safeHtml"></span>
          </div>
      </div>
    `
})
export class Ng2vToastComponent {

  @Input() toast: Ng2vToastData;
  @Output('closeToast') closeToastEvent = new EventEmitter();

  /**
   * Event handler invokes when user clicks on close button.
   * This method emit new event into ToastyContainer to close it.
   */
  close($event: any) {
    $event.preventDefault();
    this.closeToastEvent.next(this.toast);
  }
}