import { Component, Input } from '@angular/core';
import * as Highcharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';
import HC_solidGauge from 'highcharts/modules/solid-gauge';
import { HighchartsChartModule } from 'highcharts-angular';
import { CommonModule } from '@angular/common';


HighchartsMore(Highcharts);
HC_solidGauge(Highcharts);

@Component({
  selector: 'app-gauge-chart',
  standalone: true,
  imports: [HighchartsChartModule, CommonModule],
  templateUrl: './gauge-chart.component.html',
  styleUrls: ['./gauge-chart.component.scss']
})
export class GaugeChartComponent {
  @Input() gaugeTitle: string = 'Gauge';  
  @Input() gaugeData: number = 0;         
  @Input() colorStops: [number, string][] = []; 
  @Input() maxValue: number = 100;       
  @Input() satuanData: string = '';

  isLoading: boolean = true;
  
  Highcharts: typeof Highcharts = Highcharts;

  chartOptions: Highcharts.Options = {};

  constructor() {}

  ngOnChanges() {
    this.chartOptions = {
      
      chart: {
        type: 'solidgauge',
        height: '100%',
        backgroundColor: 'transparent'
      },
      credits: {
        enabled: false
      },
      title: {
        text: this.gaugeTitle,
        style: {
          fontSize: '15px',
          fontFamily: 'Onest, sans-serif',
        }
      },
      pane: {
        startAngle: -180,
        endAngle: 180,
        background: [{
          innerRadius: '50%', 
          outerRadius: '110%',
          shape: 'arc'
        }]
      },
      yAxis: {
        min: 0,
        max: this.maxValue,
        stops: this.colorStops.length ? this.colorStops : [
          [0.1, '#55BF3B'],
          [0.5, '#DDDF0D'],
          [0.9, '#DF5353']
        ],
        lineWidth: 0,
        tickWidth: 0,
        tickAmount: 2,
        labels: {
          enabled: false
        }
      },
      series: [{
        name: this.gaugeTitle,
        data: [this.gaugeData],
        tooltip: {
          valueSuffix: this.satuanData
        },
        dataLabels: {
          enabled: true,
          y: -10,
          x: 0,
          borderColor: 'transparent',
          borderWidth: 0,
          style: {
            fontSize: '15px',
            fontFamily: 'Onest, sans-serif',
          }
        }
      }] as Highcharts.SeriesSolidgaugeOptions[]
    };

    this.isLoading = false;
  }
  
}
