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

import { UserData } from '../../../@core/data/users';
import { LayoutService } from '../../../@core/utils';
import { map, takeUntil, first } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { HeaderService } from '../../../services/header.service';
import { UserProfileAction } from '../../../entity/Auth';
import { Router } from '@angular/router';
import { LoginUserService } from '../../../services/login-user.service';
import { AuthService } from '../../../services/auth.service';

@Component({
  selector: 'ngx-header',
  styleUrls: ['./header.component.scss'],
  templateUrl: './header.component.html',
})
export class HeaderComponent implements OnInit, OnDestroy {
  header: string = '';
  private destroy$: Subject<void> = new Subject<void>();
  userPictureOnly: boolean = false;
  isLessThanMd: boolean = false;

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

  currentTheme = 'default';

  userMenu: NbMenuItem[] = [
    {
      title: 'Profile',
      data: UserProfileAction.GoToProfile
    },
    {
      title: 'Log out',
      data: UserProfileAction.LogOut
    }];

  public get user() {
    return this.loginUserService.userAccess;
  }
  public get userFullName() {
    if (this.user) {
      return `${this.user.firstName} ${this.user.lastName}`;
    } else {
      return null;
    }
  }
  public get avatarImage() {
    if (this.user && this.user.avatarImage) {
      return this.user.avatarImage
    } else {
      return null;
    }
  }
  constructor(
    private sidebarService: NbSidebarService,
    private menuService: NbMenuService,
    private themeService: NbThemeService,
    private userService: UserData,
    private layoutService: LayoutService,
    private breakpointService: NbMediaBreakpointsService,
    private headerService: HeaderService,
    private loginUserService: LoginUserService,
    private authService: AuthService,
    protected router: Router,
  ) {

    this.headerService.headerChange$.pipe(takeUntil(this.destroy$)).subscribe(result => {
      this.header = result;
    });
  }



  ngOnInit() {
    this.currentTheme = this.themeService.currentTheme;

    const { md, xl } = this.breakpointService.getBreakpointsMap();
    this.themeService.onMediaQueryChange()
      .pipe(
        map(([, currentBreakpoint]) => currentBreakpoint.width),
        takeUntil(this.destroy$),
      )
      .subscribe((screenWidth: number) => {
        let isLessThanXl = screenWidth < xl;
        this.isLessThanMd = screenWidth < md;
        this.userPictureOnly = isLessThanXl

      });

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

    this.menuService.onItemClick().subscribe(result => {
      if (this.isLessThanMd && result.tag == 'NavMenu' && result.item.link) {
        this.toggleSidebar();
      } else if (result.tag == 'UserProfileMenu') {
        switch (result.item.data as UserProfileAction) {
          case UserProfileAction.None: break;
          case UserProfileAction.GoToProfile:
            this.router.navigate(["/myapp/profile"]);
            break;
          case UserProfileAction.LogOut:
            this.logout();
            break;
          default: break;
        }
      }
    });
  }

  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;
  }

  navigateHome() {
    this.menuService.navigateHome();
    return false;
  }
  logout() {
    this.authService.logout();

  }
}
