import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Mediator } from '../services/mediator';
import { CoreMediatorChannels } from '../utils/mediator-channels';
import { TranslateService } from '../services/translate-service';
@Component({
  selector: 'core-notification',
  templateUrl: './notifications.component.html',
  styleUrls: ['./notifications.component.css']
})
export class NotificationsComponent implements OnInit, AfterViewInit {
  constructor(private translationService:TranslateService){

  }
  ngOnInit() {
    this.displayConfirmationPopup();
    this.displayErrorAlert();
    this.displaySuccessAlert();
  }

  displayConfirmationPopup() {
    Mediator.subscribe(CoreMediatorChannels.CONFIRMATION_DIALOG, (data: any) => {
      $('#core_confirmation_popup').modal('show');
      $('#core_confirmation_popup_yes').unbind('click');
      $('#core_confirmation_popup_msg').text(data.message);
      $('#core_confirmation_popup_no').click(() => {
        data.cancel();
        $('#core_confirmation_popup').modal('hide');
      });
      $('#core_confirmation_popup_yes').click(() => {
        data.confirm();
      });
    });
  }
  displayErrorAlert() {
    Mediator.subscribe(CoreMediatorChannels.ERROR_ALERT, (data) => {
      var currentErrorDivID = $(".notificationDiv").length + 1;
      var errorNotificationDiv = "<div dir="+this.translationService.instant('direction')+" id='notificationDiv_" + currentErrorDivID + "' class='alert alert-danger fade in notificationDiv' style='display:none'>" +
        "<a class='close "+this.translationService.instant('invDir')+"' onclick= $('#notificationDiv_" + currentErrorDivID + "').remove()" + " aria-label='close'>&times;</a>" +
        "<span class='glyphicon glyphicon-remove-sign errorIcon "+''+"'></span> <span id='errorAlertMsg_" + currentErrorDivID + "'></span>" +
        "</div>";
      $(".notificationContainer").append(errorNotificationDiv);
      $("#errorAlertMsg_" + currentErrorDivID).html(data.errorMessage);
      $("#notificationDiv_" + currentErrorDivID).show();
    });
  }
  displaySuccessAlert() {
    Mediator.subscribe(CoreMediatorChannels.SUCCESS_ALERT, (data) => {
      var currentNotificationDivID = $(".notificationDiv").length + 1;
      var successNotificationDiv = "<div dir="+this.translationService.instant('direction')+" id='notificationDiv_" + currentNotificationDivID + "' class='alert alert-success fade in notificationDiv' >" +
        "<a class='close "+this.translationService.instant('invDir')+"'  onclick= $('#notificationDiv_" + currentNotificationDivID + "').remove()" + " aria-label='close'>&times;</a>" +
        "<span class='glyphicon glyphicon glyphicon-ok-sign'></span> <span id='errorAlertMsg_" + currentNotificationDivID + "'></span>" +
        "</div>";
      $(".notificationContainer").append(successNotificationDiv);
      $("#errorAlertMsg_" + currentNotificationDivID).html(data.message);
      this.autoHideAlert('notificationDiv_' + currentNotificationDivID);
    });
  }
  ngAfterViewInit() {

  }
  autoHideAlert(alertID: string) {
    window.setTimeout(function () {
      $("#" + alertID).fadeTo(500, 0).slideUp(500, function () {
        $(this).remove();
      });
    }, 3000);
  }
}