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

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: [16, 33],
  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 = 1.2;

  @Input()
  unit = '';

  @Input()
  options: GaugeChart;

  @Input()
  format = false;

  @Input()
  maxValue = 6;

  canvasWidth = 250;
  centralLabel = '25';
  bottomLabel = '';

  constructor() { }

  ngOnInit() {
    let valueNumber = +this.value;
    this.value = this.value / this.maxValue * 100;
    console.log(this.value);
    if (this.format) {
      valueNumber = valueNumber / 1000;
    }

    let valueFormater = 0;
    if (valueNumber >= 86400) {
      this.unit = 'd';
      valueFormater = valueNumber / 86400;
    } else if (valueNumber >= 3600) {
      this.unit = 'h';
      valueFormater = valueNumber / 3600;
    } else if (valueNumber >= 60) {
      this.unit = 'm';
      valueFormater = valueNumber / 60;
    } else {
      this.unit = 's';
      valueFormater = valueNumber;
    }
    this.bottomLabel = valueFormater.toFixed(1) + ' ' + this.unit;
    if (!this.options) {
      this.options = DEFAULT_OPTIONS_GAUGE_CHART;
    }
  }

}
