import {Component, OnInit, ViewChild, ElementRef, Input, AfterViewInit} from '@angular/core';
import DonutChart from 'britecharts/dist/umd/donut.min.js';
import Legend from 'britecharts/dist/umd/legend.min.js';
import * as d3Selection from 'd3-selection';
import {addSvgResize} from '../../../../helpers/resize.helper';

@Component({
  selector: 'onguard-donut-chart',
  templateUrl: './donut-chart.component.html',
  styleUrls: ['./donut-chart.component.scss']
})
export class DonutChartComponent implements OnInit, AfterViewInit {
  public tooltipDataPoint: any;
  public tooltipShow = false;
  public callType: string;
  public percValue: string;
  @Input() colorSchema: string[] = ['#00AEEF', '#FF9801', '#39B54A'];
  @Input() useTooltip = true;
  @Input() height = 356;
  @Input() markerSize = 8;
  @ViewChild('donutChartElementRef') donutChartElementRefRef: ElementRef;
  @ViewChild('toolTipElement') toolTipElementRef: ElementRef;
  @ViewChild('donutChartLegendElement') donutChartLegendElementRef: ElementRef;

  private element: any;

  private _data: any;

  @Input() set data(data: any) {
    if (this.element) {
      const container = d3Selection.select(this.element);
      container.selectAll('*').remove();
      this.donutChart(this.donutChartElementRefRef.nativeElement, data);
    } else {
      this._data = data;
    }
  }

  constructor() {
  }

  ngAfterViewInit(): void {
    this.donutChart(this.donutChartElementRefRef.nativeElement, this._data);
    addSvgResize(this.donutChartElementRefRef.nativeElement);
    addSvgResize(this.donutChartLegendElementRef.nativeElement);
  }

  ngOnInit(): void {
  }

  public donutChart(el, data): void {
    this.element = el;
    const container = d3Selection.select(el);
    const width = container.node() ? container.node().getBoundingClientRect().width : 300;

    const legendBox = new Legend();
    legendBox
      .width(width)
      .height(this.height / 9)
      .isHorizontal(true)
      .colorSchema(this.colorSchema)
      .markerSize(this.markerSize);

    const donutChart = new DonutChart();

    const diameter = Math.min(width, this.height * (8 / 9));

    donutChart
      .height(diameter)
      .width(width)
      .externalRadius(diameter / 2)
      .internalRadius(diameter / 3.25)
      .highlightSliceById(1)
      .hasFixedHighlightedSlice(true)
      .isAnimated(true)
      .colorSchema(this.colorSchema)
      .on('customMouseOver', () => {
        this.tooltipShow = true;
      })
      .on('customMouseMove', (dataPoint, topicColorMap, x, y) => {
        this.tooltipShow = true;
        this.callType = dataPoint.data.name;
        this.percValue = dataPoint.data.percentage + '%';
      })
      .on('customMouseOut', () => {
        this.tooltipShow = false;
      });
    container.datum(data).call(donutChart);
    container.datum(data).call(legendBox);

  }

}