import {ChangeDetectionStrategy, Component, ElementRef, HostListener, Input} from '@angular/core';

@Component({
  selector: 'rss-uc-header-notification',
  templateUrl: './uc-header-notification.component.html',
  styleUrls: ['uc-header-notification.component.scss', '../uc-header.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UcHeaderNotificationComponent {
  @Input() notificationsCount: number;
  @Input() notificationAppUrl: string;

  isMenuOpen = false;

  constructor(private element: ElementRef) {
  }

  toggleMenu() {
    this.isMenuOpen = !this.isMenuOpen;
  }

  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    if (!this.element.nativeElement.contains(targetElement)) {
      this.isMenuOpen = false;
    }
  }
}