import { Component, OnDestroy, OnInit } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";
import { PrimeNGConfig } from "primeng/api";
import { AuthService } from "./services/auth/auth.service";
import { SocketService } from "./services/socket/socket.service";
import { ThemeService } from "./services/theme/theme.service";
import { Subject } from "rxjs";
import { Themes } from "./models/view/themes.enum";
import { takeUntil } from "rxjs/operators";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit, OnDestroy {

  themeName: string = Themes.Default;
  sidebarWidth: string = '175px';

  isLoggedIn: boolean = false;

  private unsubscriber = new Subject<void>();

  constructor(
    private authService: AuthService,
    private themeService: ThemeService,
    private socket: SocketService,
    private translateService: TranslateService,
    private config: PrimeNGConfig,
  ) {
    this.themeService.sidebarWidth$.pipe(
      takeUntil(this.unsubscriber)
    ).subscribe(value => {
      this.sidebarWidth = value;
    });
    this.themeService.themeName$.pipe(
      takeUntil(this.unsubscriber)
    ).subscribe(value => {
      this.themeName = value;
    });
    this.authService.isLoggedIn$.pipe(
      takeUntil(this.unsubscriber)
    ).subscribe(value => {
      this.isLoggedIn = value;
    });
  }

  ngOnInit(): void {
    this.translateService.setDefaultLang("en");

    this.themeService.loadTheme();
    this.socket.startSocket();
  }

  ngOnDestroy() {
    this.unsubscriber.next();
    this.unsubscriber.unsubscribe();
  }

  loadLang(): void {
    let lang = localStorage.getItem(`default_lang`);
    if (!lang) {
      lang = "en";
      this.setLang(lang);
    }
    this.translate(lang);
  }

  setLang(lang: string): void {
    localStorage.setItem(`default_lang`, lang);
  }

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


  setSideWidth($event: any): void {
    this.themeService.setSideWidth($event);
  }
}