import { Component, OnDestroy } from '@angular/core';
import { SidebarService } from 'src/app/service/sidebar.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { GuiService } from 'src/app/service/gui.service';
import { FeatureFlagService } from 'src/app/service/feature-flag.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent implements OnDestroy {
  showSidebar = false;
  theme = 'lan-maestro';
  showTechnicalDemoBanner = false;

  loadedGuiSettings = false;
  unsubscribe$ = new Subject<void>();

  constructor(
    private sidebar: SidebarService,
    private gui: GuiService,
    private features: FeatureFlagService
  ) {
    this.features.get('TechnicalDemoBanner').then(showTechnicalDemoBanner => {
      this.showTechnicalDemoBanner = showTechnicalDemoBanner;
    });
    this.sidebar.visible$
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(visible => {
        this.showSidebar = visible;
      });

    this.gui.theme$.pipe(takeUntil(this.unsubscribe$)).subscribe(theme => {
      this.theme = theme;
    });
    this.gui.loadedGuiSettings$
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(loaded => {
        this.loadedGuiSettings = loaded;
      });
  }

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