import { Component, ViewChild } from '@angular/core';
import { faAngleRight, faPlus, faSave, faServer } from '@fortawesome/free-solid-svg-icons';

import { ServiceCheckFormComponent } from 'src/app/components/service-check-form/service-check-form.component';
import { ServiceApiService } from 'src/app/services/service-api.service';
import { ServerApiService } from 'src/app/services/server-api.service';

@Component({
  selector: 'app-admin-service-checks-page',
  templateUrl: './admin-service-checks-page.component.html',
  styleUrls: ['./admin-service-checks-page.component.scss'],
  host: { class: 'd-flex flex-column h-100' }
})
export class AdminServiceChecksPageComponent {
  @ViewChild(ServiceCheckFormComponent) formRef!: ServiceCheckFormComponent;
  public serverConfigs: ServerConfig[] = [];
  public serviceChecks: HttpCheckConfig[] = [];
  public fa = { save: faSave, server: faServer, angleRight: faAngleRight, plus: faPlus };

  public activeId = 0;

  constructor(private serviceApi: ServiceApiService, apiService: ServerApiService) {
    apiService.serverConfigs$.subscribe(data => {
      this.serverConfigs = data;
      if (data.length > 0) {
        this.fetchServiceChecks(data[this.activeId].id);
      }
    });
  }

  ngOnInit(): void {}

  async fetchServiceChecks(serverId: number) {
    try {
      this.serviceChecks = await this.serviceApi.loadServiceChecks(serverId);
    } catch (error: any) {
      console.error(error);
    }
  }

  saveServiceCheck(event: Event) {
    event.stopPropagation();
    this.formRef?.save();
  }

  addServiceCheck(serverId: number) {
    this.serviceChecks.unshift({ serverId, checks: [] as string[] } as HttpCheckConfig);
  }
}