import { Component, OnInit } from '@angular/core';
import { initFlowbite } from 'flowbite';
import { AuthService } from '../../services/auth.service';
import { UserStateResponse } from '../../models/user-state-request.model';
import { Router } from '@angular/router';
import { filter, map } from 'rxjs';
import { AppService } from '../../services/app.service';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss'],
})
export class NavigationComponent implements OnInit {

  state: UserStateResponse | undefined | null;
  darkMode: boolean;

  constructor(
    private authService: AuthService,
    private appService: AppService,
    private router: Router,
  ) {
    this.darkMode = this.appService.darkMode;
    this.state = this.authService.currentState$.value;
    this.authService.currentState$.pipe(
      filter(state => state === undefined)
    ).subscribe( state =>{
        this.router.navigateByUrl('/auth/login');
    });
  }

  ngOnInit(): void {
    initFlowbite();
  }

  logout(): void {
    this.authService.logout();
  }

  toggleDarkmode() {
    this.appService.toggleDarkMode();
    this.darkMode = this.appService.darkMode;
  }
}