import { Component } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { JoyrideService } from 'ngx-joyride';
import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-status',
  templateUrl: './status.component.html',
  styleUrl: './status.component.css'
})
export class StatusComponent {
  baseUrl: string;
  diskUsage: any = {};
  servicesStatus: any = {};
  subnets: any[] = [];
  diskUsageChartData: any[] = [];
  loading: boolean = false;

  view: [number, number] = [1100, 500];

  gradient: boolean = true;
  showLegend: boolean = true;
  showLabels: boolean = true;
  isDoughnut: boolean = true;
  colorScheme: any = {
    domain: ['#FF6384', '#3f51b5']
  };

  constructor(private http: HttpClient, private joyrideService: JoyrideService, private configService: ConfigService) {
    this.baseUrl = this.configService.apiUrl;
  }

  ngOnInit(): void {
    this.loadStatus();
  }
  loadStatus(): void {
    this.loading = true;
    this.http.get<any>(`${this.baseUrl}/og-dhcp/status`).subscribe(data => {
      this.diskUsage = data.message.disk_usage;
      this.servicesStatus = data.message.services_status;
      this.subnets = data.message.subnets;

      this.diskUsageChartData = [
        {
          name: 'Usado',
          value: parseFloat(this.diskUsage.used)
        },
        {
          name: 'Disponible',
          value: parseFloat(this.diskUsage.available)
        }
      ];
      this.loading = false;
    }, error => {
      this.loading = false;
      console.error('Error fetching status', error);
    });
  }

  getServices(): { name: string, status: string }[] {
    return Object.keys(this.servicesStatus).map(key => ({
      name: key,
      status: this.servicesStatus[key]
    }));
  }

  iniciarTour(): void {
    this.joyrideService.startTour({
      steps: [
        'titleStep',
        'diskUsageStep',
        'servicesStatusStep',
        'subnetsStep'
      ],
      showPrevButton: true,
      themeColor: '#3f51b5'
    });
  }

}