import { Component, OnInit, Input, Output, ViewChild, EventEmitter, ElementRef, NgZone, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';

import * as d3 from 'd3';
import { SessionService } from '@shared/services/session.service';
import { ApiService } from '@shared/services/api.service';
import { AppConstants } from '../../app.constants';

@Component({
  selector: 'app-progress-chart',
  templateUrl: './progress-chart.component.html',
  styleUrls: ['./progress-chart.component.sass'],
  encapsulation: ViewEncapsulation.None
})
export class ProgressChartComponent implements OnInit {

  @Input() ProgressType: any;
  @Input() ProgressPercentage: any;
  @Input() progresschartHeight: any;

  public type: any;
  public heading: string;
  @Input() category: string;
  public progressData: any = {};
  @ViewChild('chart') elementView: ElementRef;
  @Output() onApiSuccess: EventEmitter<any> = new EventEmitter();

  public dataSet: Object[];
  public colorCodes: Array<any> = ["#1d1e52", "#008b8f", "#ff9c2c", "#f75a38", "#d11d55"];
  public margin = {top: 20, right: 20, bottom: 30, left: 50};
  public width: number;
  public height: number;
  public radius: number;

  public arc: any;
  public labelArc: any;
  public pie: any;
  public color: any;
  public svg: any;

  public progresslabel: any;

  constructor(
    private zone:NgZone,
    private route: Router,
    private SessionService: SessionService,
    public _apiCallService: ApiService
      ) {}

  ngOnInit() {
      this.type = AppConstants.HTML_MODERATE;
      if(this.ProgressPercentage && this.ProgressType) this.getCategoryData("user");
  }

  getCategoryData(apiName) {
      this.progressData = [100, this.ProgressPercentage];
      setTimeout(() => { this.initSvg() }, 100);
  }

  addDropShadow() {
      let defs = this.svg.append("defs");
      const filter = defs.append("filter")
          .attr("id", "shadow")
          .attr("height", "130%");

      filter.append("feGaussianBlur")
          .attr("in", "SourceAlpha")
          .attr("stdDeviation", 5)
          .attr("result", "blur");

      filter.append("feOffset")
          .attr("in", "blur")
          .attr("dx", 5)
          .attr("dy", 5)
          .attr("result", "offsetBlur");

      let feMerge = filter.append("feMerge");
      feMerge.append("feMergeNode")
          .attr("in", "offsetBlur");
      feMerge.append("feMergeNode")
          .attr("in", "SourceGraphic");
  }

  public initSvg() {
      this.svg = d3.select("#"+ this.ProgressType)
      .append("svg")
      .attr("class", "progresschart")
      .attr("width", "100%")
      .attr("height", 20);
      let max = d3.max(this.progressData);

      let formatter = d3.format(".0%");
      let x = d3.scaleLinear().domain([0, 100]).range([0, 100]);

      if(this.progresschartHeight == "big") {
          this.svg.selectAll("rect")
          .data(this.progressData)
          .enter().append("rect")
          .attr("width", (d, i)=>{ return d+"%"} )
          .attr("height", 14)
          .attr("rx", 8)
          .attr("ry", 8)
          ;
      } else if(this.progresschartHeight == "small") {
          this.svg.selectAll("rect")
          .data(this.progressData)
          .enter().append("rect")
          .attr("width", (d, i)=>{ return d+"%"} )
          .attr("height", 10)
          .attr("rx", 8)
          .attr("ry", 8)
          ;
      }

  }

}