import { Component, OnDestroy, OnInit } from '@angular/core';
import { MenuItem, PrimeNGConfig } from 'primeng/api';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
import { GuiService } from 'src/app/service/gui.service';
import { User } from 'src/app/model/auth/user';
import { AuthService } from 'src/app/service/auth.service';
import { MenuElement } from 'src/app/model/view/menu-element';
import { SidebarService } from 'src/app/service/sidebar.service';
import { SettingsService } from 'src/app/service/settings.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit, OnDestroy {
  langList: MenuItem[] = [];
  themeList: MenuItem[] = [];

  userMenuList!: MenuItem[];
  user: User | null = null;
  private unsubscribe$ = new Subject<void>();
  isMobile = window.innerWidth <= 600;

  menu: MenuElement[] = [];

  constructor(
    private translateService: TranslateService,
    private config: PrimeNGConfig,
    private guiService: GuiService,
    private auth: AuthService,
    private sidebarService: SidebarService,
    private settings: SettingsService
  ) {
    this.guiService.isMobile$
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(isMobile => {
        this.isMobile = isMobile;
        if (isMobile) {
          this.sidebarService.hide();
        }
      });

    this.auth.user$.pipe(takeUntil(this.unsubscribe$)).subscribe(async user => {
      this.user = user;
      await this.initMenuLists();
    });

    this.themeList = this.settings.settings.themes.map(theme => {
      return {
        label: theme.label,
        command: () => {
          this.guiService.theme$.next(theme.name);
        },
      };
    });
  }

  async ngOnInit() {
    await this.initMenuLists();
    await this.loadLang();
  }

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

  async login() {
    await this.auth.login();
  }

  async initMenuLists() {
    await this.initLangMenuList();
    await this.initUserMenuList();
  }

  async initLangMenuList() {
    this.langList = [
      {
        label: 'English',
        command: () => {
          this.translate('en');
          this.setLang('en');
        },
      },
      {
        label: 'Deutsch',
        command: () => {
          this.translate('de');
          this.setLang('de');
        },
      },
    ];
  }

  async initUserMenuList() {
    this.userMenuList = [
      {
        label: `${this.user?.username}`,
        disabled: true,
        visible: !!this.user,
      },
      {
        separator: true,
      },
      {
        label: this.translateService.instant('header.logout'),
        command: () => {
          this.auth.logout().then(() => {
            console.log('logout');
          });
        },
        icon: 'pi pi-sign-out',
      },
    ];
  }

  translate(lang: string) {
    this.translateService.use(lang);
    this.translateService
      .get('primeng')
      .subscribe(res => this.config.setTranslation(res));
  }

  async loadLang() {
    const lang = 'en';
    this.setLang(lang);
    this.translate(lang);
  }

  setLang(lang: string) {
    // this.settings.setSetting(`lang`, lang);
    console.log('setLang', lang);
  }

  toggleSidebar() {
    if (this.sidebarService.visible$.value) {
      this.sidebarService.hide();
      return;
    }

    this.sidebarService.show();
  }
}
