import { DecimalPipe } from '@angular/common';
import { Component, Input, OnInit } from '@angular/core';

/* Imports */
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";


export class GaugeChart {
  hasNeedle?: boolean;
  needleColor?: string;
  needleUpdateSpeed?: number;
  arcColors?: Array<string>;
  arcDelimiters?: Array<number>;
  rangeLabel?: Array<string>;
  needleStartValue?: number;
}

export const DEFAULT_OPTIONS_GAUGE_CHART: GaugeChart = {
  hasNeedle: true,
  needleColor: '#676a6c',
  needleUpdateSpeed: 1000,
  arcColors: ['#1ab394', '#f8ac59', '#ed5565'],
  arcDelimiters: [0, 10000],
  rangeLabel: ['0', '6'],
  needleStartValue: 1,
};

@Component({
  selector: 'byte-gauge-chart',
  templateUrl: './gauge-chart.component.html',
  styleUrls: ['./gauge-chart.component.scss']
})
export class GaugeChartComponent implements OnInit {

  @Input()
  name = 'Gauge chart';

  @Input()
  value: any;

  @Input()
  unit = '';

  

  @Input()
  options: GaugeChart;

  @Input()
  format = false;

  @Input()
  maxValue = 6;

  canvasWidth = 300;
  centralLabel = '25';
  bottomLabel = '';

  constructor() { }

  ngOnInit() {

    



  }

  ngAfterViewInit(){
      ////inicio
    am4core.useTheme(am4themes_animated);
    am4core.addLicense("ch-custom-attribution");
    // Themes end

    // create chart
    let chart = am4core.create("chartdiv-gauge", am4charts.GaugeChart);
    // chart.numberFormatter.numberFormat = "#.00";
    chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

    chart.innerRadius = am4core.percent(60);

    chart.radius= am4core.percent(90);

    let axis = chart.xAxes.push( new am4charts.ValueAxis() as any);
    axis.min = 0;
    axis.max = 10;
    axis.strictMinMax = true;
    const valor = Math.round(parseInt(this.value,10) ) / 1000;
    const valor_msecs = Math.round(valor * 100) / 100;

    axis.renderer.grid.template.stroke = new am4core.InterfaceColorSet().getFor("background");
    axis.renderer.grid.template.strokeOpacity = 0.3;
    axis.renderer.labels.template.fontSize = 10;
    axis.renderer.labels.template.adapter.add("text", function(text) {
      if(text == undefined){
          return text
      }
      return text + "s";
    })

    let colorSet = new am4core.ColorSet()

    let range0 = axis.axisRanges.create();
    range0.value = 0;
    range0.endValue = 2;
    range0.axisFill.fillOpacity = 1;
    range0.axisFill.fill = colorSet.getIndex(0)
    range0.axisFill.zIndex = - 1;

    let range1 = axis.axisRanges.create();
    range1.value = 2;
    range1.endValue = 6;
    range1.axisFill.fillOpacity = 1;
    range1.axisFill.fill = colorSet.getIndex(2)
    range1.axisFill.zIndex = -1;

    let range2 = axis.axisRanges.create();
    range2.value = 6;
    range2.endValue = 10;
    range2.axisFill.fillOpacity = 1;
    range2.axisFill.fill = colorSet.getIndex(4)
    range2.axisFill.zIndex = -1;

    let hand = chart.hands.push(new am4charts.ClockHand());
    hand.innerRadius = am4core.percent(20);
        hand.startWidth = 4;
        // hand.pin.disabled = true;
        hand.value = valor;
    // using chart.setTimeout method as the timeout will be disposed together with a chart
    // hand.showValue(valor, valor, am4core.ease.cubicOut);


    // Nuevo
    let label = chart.radarContainer.createChild(am4core.Label);
        label.isMeasured = false;
        label.fontSize = 20;
        label.x = am4core.percent(20);
        label.y = am4core.percent(100);
        label.horizontalCenter = "middle";
        label.verticalCenter = "bottom";
        label.text = valor_msecs + "s";
  }

}
