import { Component, Input, ElementRef } from '@angular/core';
import { BaseChart } from "./baseChart";
import { Portlet } from "../../portlet/portlet";

export interface IGaugeRangeItem {
  startValue: number;
  endValue: number;
}

@Component({
  selector: 'rd-gauge',
  template: `
    <div id="dxElement" style="width:100%"></div>
  `
})
export class Gauge extends BaseChart {
  @Input("rd-value") value: number | string;
  @Input("rd-title") title: string;
  @Input("rd-sub-title") subTitle: string;
  @Input("rd-range") ranges: Array<IGaugeRangeItem> = [{ startValue: 0, endValue: 100 }];
  @Input("rd-height") height: number | string = 250;
  @Input('rd-custom-palette') customPalette: boolean;

  constructor(public element: ElementRef, portlet: Portlet) {
    super(element, portlet);
    this.instance = "CircleGauge";
  }

  ngDoCheck() {
    var setRenderValid;
    if (this.container && this.previousWidth != this.container[0].clientWidth) {
      if (this.value != null && this.value != undefined && this.ranges) {
        for (let item of this.ranges) {
          if (item.startValue != undefined || item.startValue != null || item.endValue != undefined || item.endValue != null) {
            setRenderValid = true
          } else setRenderValid = false;
        }
        if (setRenderValid) {
          this.previousWidth = this.container[0].clientWidth;
          this.render();
        }
      }
    }
  }

  public render() {
    if (this.container[0].clientWidth > 0) {
      this.initialized = true;
      this.container.dxCircularGauge(this.getChartOptions());
      this.dxElement = this.container.dxCircularGauge('instance');
      this.dxElement.render();
    }
  }

  private getChartOptions() {
    return {
      scale: {
        startValue: 0,
        endValue: 100,
        tickInterval: 10,
        label: {
          useRangeColors: true,
          customizeText: function (arg) {
            return arg.valueText + ' %';
          },
          format: 'decimal'
        }
      },
      rangeContainer: {
        palette: this.customPalette ? null : "pastel",
        ranges: this.ranges
      },
      size: {
        height: this.height,
      },
      title: {
        text: this.title,
        subTitle: this.subTitle,
        font: { size: 14 }
      },
      export: { enabled: this.export },
      value: this.value,
      subvalues: [this.value],
      tooltip: {
        enabled: true,
        zIndex: 9999999999999,
        customizeTooltip: function (arg) {
          return {
            text: arg.valueText + "%",
          };
        },
      }
    }
  }
}