import { EventEmitter, HostListener, Input, Output } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, NavigationStart, Router } from '@angular/router';

@Component({
  selector: 'lib-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  isActive: boolean = false;
  isActiveBurgerMenu: boolean = false;
  isActiveItems: boolean = false;
  currentRoute: string = '';
  @Input() navbarIcon : any;
  @Input() appsIcon :any;
  @Input() user :any;
  @Input() bellPath:string = '';
  @Input() userMenu :any;
  @Input() principalMenu:any ;
  @Output() signOutEvent : EventEmitter<any> = new EventEmitter();


  @HostListener('document:click', ['$event.target']) onClick(
    target: HTMLElement
  ) {
    if (typeof target.className === 'string') {
      // console.log(target.className)
      // console.log(this.isActive)
      if (!target.className.includes('appItemNav')) {
        this.appsIcon.isActive = false;
      }

      !(target.className === 'navbar-link' || target.className === 'username' )
        ? (this.isActive = false)
        : '';

      this.isActiveBurgerMenu && target.className.includes('itemsNaV')
        ? (this.isActiveBurgerMenu = false)
        : '';

      !target.className.includes('itemsNaV')
        ? this.principalMenu.forEach((item:any) => {
            item.isActive = false;
          })
        : '';

        
      target.className.includes('menu-user')
      ?
         this.isActive = !this.isActive  : '';
    }
  }

  constructor(private route: Router, private router: Router) {}

  ngOnInit() {

    this.currentRoute = this.router.url;

    this.route.events.subscribe((event:any) => {
      if (event instanceof NavigationStart) {
        this.currentRoute = event.url;
      }
    });
  }

  clickItem(index: number) {
    this.principalMenu.forEach((item:any, i:number) =>
      i === index ? (item.isActive = !item.isActive) : (item.isActive = false)
    );
  }
}
/*
---------- Example inputs--------
appsIcon =  {
  isActive: false,
  icon: 'fas fa-th',
  hasAppsIcon: false,
  options: [],
}
userMenu = []
menuItems = {user: {
  name: "as",
  rol:"sd",
  email: "s",
  avatar:'https://www.pngkit.com/png/detail/281-2812821_user-account-management-logo-user-icon-png.png',
}};
menuPrincipal = [
  {
    label: 'ROBOTS',
    isActive: false,
    isDropdown: false,
    path:'/robots'
  },
  {
    label: 'DEVICES',
    isActive: false,
    isDropdown: false,
    path:'/machines'
  },

  {
    label: 'USERS',
    isDropdown: false,
    path: '/users',
    isActive: false,
  },
  {
    label: 'REPORTS',
    isDropdown: false,
    path: '/reports',
    isActive: false,
  }
] */