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

interface NavigationLink {
  label: string;
  routerLink: string;
}

interface UserMenuButton {
  label: Function | string;
  routerLink: string | undefined;
  clickCallback: Function | undefined;
}

@Component({
  selector: "app-navigation",
  templateUrl: "./navigation.component.html",
  styleUrls: ["./navigation.component.scss"],
})
export class NavigationComponent implements OnInit {
  navigationLinks: NavigationLink[] = [
    { routerLink: "/", label: "Startseite" },
    { routerLink: "/settings", label: "Völker" },
  ];

  usermenuButtons: UserMenuButton[] = [
    {
      label: "Einstellungen",
      routerLink: "/settings",
      clickCallback: undefined,
    },
    {
      label: () => (this.darkMode ? "Hell" : "Dunkel"),
      routerLink: undefined,
      clickCallback: () => {
        this.toggleDarkmode();
      },
    },
    {
      label: "Ausloggen",
      routerLink: undefined,
      clickCallback: () => {
        this.logout();
      },
    },
  ];

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

  clickUserMenuButtonLabel(button: UserMenuButton) {
    if (button.clickCallback !== undefined) {
      button.clickCallback();
    }
  }

  getUserMenuButtonLabel(button: UserMenuButton) {
    if (typeof button.label === "function") {
      return button.label();
    } else {
      return button.label;
    }
  }
}