import { Component, OnInit, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
import { Chart, registerables } from 'chart.js';
import { SensorService } from '../../../../cores/services/sensor.service';
import { ApiResponse, ParameterSensor } from '../../../../cores/interface/sensor-data';
import { CommonModule } from '@angular/common';

Chart.register(...registerables);

@Component({
  selector: 'app-actualgraph',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './actualgraph.component.html',
  styleUrls: ['./actualgraph.component.scss']
})
export class ActualgraphComponent implements OnInit {
  @ViewChild('chartCanvas', { static: false }) chartCanvas?: ElementRef<HTMLCanvasElement>;
  private chart: Chart | undefined;
  selectedButton: string = 'npk1'; 
  isLoading: boolean = true; 
  isNoData: boolean = false;  
  greeting = '';
  
  actualDataValues = {
    nitrogen: 0,
    phosphorus: 0,
    kalium: 0
  };

  constructor(
    private sensorService: SensorService, 
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    this.updateGreeting();
    this.loadData('npk1');  
  }

  loadData(sensorType: string): void {
    this.selectedButton = sensorType;
    this.isLoading = true;  
    this.isNoData = false;  

    this.sensorService.getLatestData().subscribe(
      (response: ApiResponse) => {
        if (response.statusCode === 200) {
          const selectedData = (response.data as { [key: string]: any[] })[sensorType];  

          if (selectedData && selectedData.length > 0) {
            const npkData: ParameterSensor = selectedData[0]; 

            this.actualDataValues = {
              nitrogen: npkData.soilnitrogen ?? 0,
              phosphorus: npkData.soilphosphorus ?? 0,
              kalium: npkData.soilpotassium ?? 0
            };

            this.isLoading = false;
            this.cdr.detectChanges();
          } else {
            this.isNoData = true; 
            this.isLoading = false; 
            this.cdr.detectChanges();
          }
        } else {
          console.error('Error loading data: ', response.message);
          this.isLoading = false;  
          this.cdr.detectChanges();
        }
      },
      (error) => {
        console.error('Error loading data:', error);
        this.isLoading = false; 
        this.cdr.detectChanges();
      }
    );
  }

  updateGreeting(): void {
    const hour = new Date().getHours();
    this.greeting = hour < 12 ? 'Good Morning' : hour < 18 ? 'Good Afternoon' : 'Good Evening';
  }
}