import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import {AuthenticationService} from "../../services/authentication.service";

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

  isCollapsed = true;
  items: MenuItem[] = [
    {
      route: '/home',
      label: 'Naptár',
      roles: ['*']
    },
    // {
    //   route: '/profile',
    //   label: 'Profil',
    //   roles: ['@']
    // },
    // {
    //   route: '/events',
    //   label: 'Események',
    //   roles: ['@']
    // },
    {
      route: '/registrations',
      label: 'Foglalások',
      roles: ['@']
    },
    {
      route: '/login',
      label: 'Bejelentkezés',
      roles: ['!']
    },
    {
      route: '/password-change',
      label: 'Jelszó módosítása',
      roles: ['@']
    },
    {
      route: '/logout',
      label: 'Kijelentkezés',
      roles: ['@']
    }
  ];

  constructor(private router: Router , private authenticationService: AuthenticationService) { }

  ngOnInit() {
  }

  /**
   * Return true, if content css position must be absolute .
   * If content css is absolute, it means, that the content occupies the whole page.
   * If not absolute, it means, that the content starts after the menubar.
   */
  isAbsolute( ){
    // return '/home' == this.router.url
    return false;
  }

  isVisible(item: MenuItem){
    if ( item.roles && item.roles.length ){
      let firstRole = item.roles[0];
      if ( firstRole == '!'){
        return !this.authenticationService.isLoggedIn();
      }else if ( firstRole == '*'){
        return  true;
      }else  if ( firstRole == '@'){
        return this.authenticationService.isLoggedIn();
      }
    }

    return true;
  }

}

export interface MenuItem {
  route: string;
  label: string;
  /**
   *  ['*'] -> guests
   *  ['!'] -> only guests
   *  ['@'] -> authenticated
   */
  roles: string[];
}
