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

import { Chart } from 'angular-highcharts';
import * as Highcharts from 'highcharts';
import { utc } from 'moment';

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

@Component({
  selector: 'byte-avg-intent-by-customer',
  templateUrl: './avg-intent-by-customer.component.html',
  styleUrls: ['./avg-intent-by-customer.component.scss']
})
export class AvgIntentByCustomerComponent implements OnInit {


  chart: Chart;

  @Input()
  data: Array<number> = [];

  @Input()
  minDate: Date = new Date();

  constructor() { }

  ngOnInit() {
    
    if (!this.data) {
      return;
    }

    am4core.useTheme(am4themes_animated);
    am4core.addLicense("ch-custom-attribution");
    let chart = am4core.create("chartdiv-bars", am4charts.XYChart);

    const sorted_data = this.data.sort(function(a,b){
      return a[0] < b[0] ? -1:1;
    });
    
    const columnsData = [];
        let cont = 0;
        sorted_data.forEach(x => {
          let date = new Date(x[0]);
          var hours = date.getHours(), year = date.getFullYear(),day = '' + date.getDate(),month = '' + (date.getMonth() + 1);
          columnsData.push({
            "label": day+'/'+month,
            "promedio": (x[1]).toFixed(2)
          });
          cont++;
    
        });

    chart.padding(40, 40, 40, 40);

    let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.renderer.grid.template.location = 0;
    categoryAxis.dataFields.category = "label";
    categoryAxis.title.text = "Día por mes";
    categoryAxis.renderer.minGridDistance = 1;
    categoryAxis.renderer.inversed = true;
    categoryAxis.renderer.grid.template.disabled = true;
    //categoryAxis.renderer.labels.tex
    categoryAxis.renderer.labels.template.adapter.add("text", function(text) {
      return text ;
    });

    let valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
    valueAxis.min = 0;
    valueAxis.title.text = "Promedio";

    let series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryY =  "label";
    series.dataFields.valueX ="promedio";
    // series.tooltipText = "{valueX.value}"
    series.columns.template.tooltipText = "{categoryY} : {valueX}";
    series.columns.template.strokeOpacity = 0;
    series.columns.template.column.cornerRadiusBottomRight = 5;
    series.columns.template.column.cornerRadiusTopRight = 5;
    

    let labelBullet = series.bullets.push(new am4charts.LabelBullet())
    labelBullet.label.horizontalCenter = "left";
    labelBullet.label.dx = 10;
    labelBullet.label.text = "{values.valueX.workingValue.formatNumber('#.0as')}";
    labelBullet.locationX = 1;

    // as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
    series.columns.template.adapter.add("fill", function(fill, target){
      return chart.colors.getIndex(target.dataItem.index);
    });

    // categoryAxis.sortBySeries = series;
    chart.data = columnsData;
    
  }

  private getDate(date: Date): any {
    // let dateNumber = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDay(), 0, 0, 0);
    // console.log(dateNumber);
    // return dateNumber;

    return (new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0))).getTime();
  }


}
