import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { JoyrideService } from 'ngx-joyride';

@Component({
  selector: 'app-ogboot-status',
  templateUrl: './ogboot-status.component.html',
  styleUrls: ['./ogboot-status.component.css']
})
export class OgbootStatusComponent implements OnInit {
  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  diskUsage: any = {};
  servicesStatus: any = {};
  installedOglives: any[] = [];
  diskUsageChartData: any[] = [];

  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) {}

  ngOnInit(): void {
    this.loadStatus();
  }

  loadStatus(): void {
    this.http.get<any>(`${this.baseUrl}/og-boot/status`).subscribe(data => {
      this.diskUsage = data.message.disk_usage;
      this.servicesStatus = data.message.services_status;
      this.installedOglives = data.message.installed_oglives;

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

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

  formatBytes(bytes: number): string {
    if (bytes >= 1e9) {
      return (bytes / 1e9).toFixed(2) + ' GB';
    } else if (bytes >= 1e6) {
      return (bytes / 1e6).toFixed(2) + ' MB';
    } else if (bytes >= 1e3) {
      return (bytes / 1e3).toFixed(2) + ' KB';
    } else {
      return bytes + ' B';
    }
  }

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