frontcraft/src/frontend/src/app/@theme/components/header/header.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { NbSidebarService, NbThemeService, NbMenuItem, NbDialogService } from '@nebular/theme';

import { LayoutService } from '../../../@core/utils';
import { map, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { User } from '../../../../../../backend/Types/Types';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { ChatComponent } from './chat.component';
import { ShoutMessage } from '../../../../../../backend/Components/Shoutbox/Interface';
import { IApiService } from '../../../frontcraft/services/ApiService';

@Component({
  selector: 'ngx-header',
  styleUrls: ['./header.component.scss'],
  templateUrl: './header.component.html',
})
export class HeaderComponent implements OnInit, OnDestroy {

  private destroy$: Subject<void> = new Subject<void>();
  user: User;
  title = "Loading ... ";

  themes = [
    {
      value: 'default',
      name: 'Light',
    },
    {
      value: 'dark',
      name: 'Dark',
    },
    {
      value: 'cosmic',
      name: 'Cosmic',
    },
    {
      value: 'corporate',
      name: 'Corporate',
    },
  ];

  currentTheme = 'default';
  userMenu: NbMenuItem[] = [];

  sendMessage: any = console.log
  chatwindow: ChatComponent
  chatlog: ShoutMessage[] = []
  newmessage = false
  lastmessage = "asdasd"
  modifyPermissions

  constructor(
    private sidebarService: NbSidebarService,
    private router: Router,
    private themeService: NbThemeService,
    private layoutService: LayoutService,
    private api: IApiService,
    private dialogService: NbDialogService,
    private route: ActivatedRoute
  ) { }

  private setUserMenu = (redirect = this.router.url) => {
    if (this.user.username === 'Guest' && this.user.rank === 'Guest'){
      this.userMenu = [
        { title: 'Login', link: '/auth/login', queryParams: { redirect: redirect } },
        { title: 'Register', link: '/auth/register', queryParams: { redirect: redirect } },
      ]
    }else{
      this.userMenu = [
        { title: 'Profile', link: '/frontcraft/user/' + this.user.username },
        { title: 'Log out', link: '/auth/logout', queryParams: { redirect: redirect } },
      ]
    }
  }

  ngOnInit() {
    this.themeService.changeTheme("dark");

    this.currentTheme = this.themeService.currentTheme;
    this.modifyPermissions = this.api.get('modifyPermissions')
    this.user = this.api.getCurrentUser()
    
    this.setUserMenu()

    this.router.events.subscribe((val) => {
      if(val instanceof NavigationEnd) {
        this.setUserMenu(val.urlAfterRedirects)
      }
    })



    this.api.get('GuildManager').getGuildInfo().then(info => {
      this.title = info.name
    })

    this.api.connectShoutbox((msg) => {
      this.chatlog.push(msg)
      msg['reply'] = false

      if (msg.message != this.lastmessage) {
        this.newmessage = true
        msg['reply'] = true
      }
      if (this.chatwindow) this.chatwindow.messages.push(msg)
    }).then(sendMsg => {
      this.sendMessage = (msg) => {
        sendMsg(msg)
        this.lastmessage = msg.message
      }
      this.api.get('Shoutbox').getFeed().then(log => { this.chatlog = log })
    })

    this.themeService.onThemeChange()
      .pipe(
        map(({ name }) => name),
        takeUntil(this.destroy$),
      )
      .subscribe(themeName => this.currentTheme = themeName);
  }

  openChat() {
    this.newmessage = false
    const ref = this.dialogService.open(ChatComponent, {
      context: {
        sendMessage: this.sendMessage,
      }
    });
    ref.onClose.subscribe(() => {
      this.chatwindow = null
    })
    this.chatwindow = ref.componentRef.instance
    this.chatwindow.messages.push(...this.chatlog)
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

  changeTheme(themeName: string) {
    this.themeService.changeTheme(themeName);
  }

  toggleSidebar(): boolean {
    this.sidebarService.toggle(true, 'menu-sidebar');
    this.layoutService.changeLayoutSize();
    return false;
  }

  logout() {
    this.api.logout()
  }

  navigateHome() {
    this.router.navigateByUrl('/')
    return false;
  }
}