import { Component, OnInit } from '@angular/core';
import { ActivationEnd, Router } from '@angular/router';
import { faAngleDown, faAngleRight, faChalkboard, faServer } from '@fortawesome/free-solid-svg-icons';
import { filter, Subscription } from 'rxjs';

import { ServerApiService } from './services/server-api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  private subscriptions: Subscription[] = [];

  public fa = { faAngleDown, faAngleRight, faChalkboard, faServer };
  public serverConfigs: ServerConfig[] = [];

  public currentUrl: string = '/';

  constructor(private apiService: ServerApiService, router: Router) {
    this.subscriptions.push(
      this.apiService.serverConfigs$.subscribe({ next: this.onServerConfigs.bind(this) }),
      router.events.pipe(filter(e => e instanceof ActivationEnd)).subscribe({
        next: e => {
          this.currentUrl = '/' + (e as ActivationEnd).snapshot.url.map(seg => seg.path).join('/');
        }
      })
    );
  }

  async ngOnInit() {
    try {
      const servers = await this.apiService.getAllServerConfigs();
      servers.forEach(server => this.apiService.getServerDataTypes(server.id));
    } catch (err) {
      console.error(err);
    }
  }

  private onServerConfigs(data: ServerConfig[]) {
    this.serverConfigs = data;
  }
}