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

@Component({
  selector: 'rss-uc-header-tile',
  templateUrl: './uc-header-tile.component.html',
  styleUrls: ['./uc-header-tile.component.scss', '../uc-header.component.scss']
})
export class UcHeaderTileComponent {

  @Input() environment: any;
  @Input() tiles: any;
  @Input() help: any;
  @ViewChild('header') header: ElementRef;
  isMenuOpen: boolean = false;

  constructor(private element: ElementRef) {
  }

  ngOnInit() {
    let element = document.createElement('link');
    element.rel = "stylesheet";
    element.href = this.environment.BRAND && this.environment.BRAND + "/css/rss-common.css";
    this.header.nativeElement.appendChild(element);
  }

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

  filterTiles(tiles) {
    return tiles ? tiles.filter(item => item.type === 'tile') : [];
  }

  helpUrl(tiles) {
    return tiles ? tiles.find(item => item.name === 'Help').url : '';
  }

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

}