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.XYChart3D);

    const columnsData = [];
    let cont = 0;
    this.data.forEach(x => {

      columnsData.push({
        "label": String(cont),
        "promedio": x
      });
      cont++;

    });
    console.log('avg data ',columnsData);

    // Add data
    chart.data = columnsData;

    // Create axes
    let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "label";
    // categoryAxis.renderer.labels.template.rotation = 270;
    // categoryAxis.renderer.labels.template.hideOversized = false;
    // categoryAxis.renderer.minGridDistance = 20;
    // categoryAxis.renderer.labels.template.horizontalCenter = "right";
    // categoryAxis.renderer.labels.template.verticalCenter = "middle";
    // categoryAxis.tooltip.label.rotation = 270;
    // categoryAxis.tooltip.label.horizontalCenter = "right";
    // categoryAxis.tooltip.label.verticalCenter = "middle";

    let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.title.text = "Promedio";
    valueAxis.title.fontWeight = "bold";

    // Create series
    let series = chart.series.push(new am4charts.ColumnSeries3D());
    series.dataFields.valueY = "promedio";
    series.dataFields.categoryX = "label";
    series.name = "Promedio";
    series.tooltipText = "[bold]{valueY}[/]"; //"{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;

    let columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 2;
    columnTemplate.strokeOpacity = 1;
    columnTemplate.stroke = am4core.color("#FFFFFF");

    columnTemplate.adapter.add("fill", function(fill, target) {
      return chart.colors.getIndex(target.dataItem.index);
    })

    columnTemplate.adapter.add("stroke", function(stroke, target) {
      return chart.colors.getIndex(target.dataItem.index);
    })

    chart.cursor = new am4charts.XYCursor();
    chart.cursor.lineX.strokeOpacity = 0;
    chart.cursor.lineY.strokeOpacity = 0;
    
  }

  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();
  }


}
