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

@Component({
  selector: 'ui-header-notifications',
  template: `
    <div class="dropdown d-none d-md-flex py-2" dropdown *ngIf="notifications">
      <a dropdownToggle class="nav-link icon" data-toggle="dropdown">
        <i class="fe fe-bell"></i>
        <span class="nav-unread"></span>
      </a>
      <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">

        <ui-header-notification-item *ngFor="let notification of notifications"
                                     [notification]="notification"
                                     (action)="action.emit($event)">
        </ui-header-notification-item>

        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item text-center text-muted-dark"
           (click)="onClick($event)">
          {{ actionText }}
        </a>
      </div>
    </div>
  `,
  styles: [],
})
export class HeaderNotificationsComponent {
  @Input() public notifications = []
  @Input() public actionText = 'Mark all as read'
  @Input() public actionType = 'MARK_ALL_READ'
  @Output() public action = new EventEmitter()

  public onClick(e) {
    e.preventDefault()
    this.action.emit({ type: this.actionType })
  }
}