import { Component, Input, OnInit } from '@angular/core';
import { Chart } from 'angular-highcharts';
import * as Highcharts from 'highcharts';

/* 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-tracing-intent-by-customer',
  templateUrl: './tracing-intent-by-customer.component.html',
  styleUrls: ['./tracing-intent-by-customer.component.scss']
})
export class TracingIntentByCustomerComponent implements OnInit {

  chart: Chart;

  @Input()
  minDate: Date;

  @Input()
  maxDate: Date;

  @Input()
  data: any;

  

  constructor() { }

  ngOnInit() {
    const es_months = {'Aug':'Ago','Nov':'Nov'};

    const series: Array<any> = this.getGenerateData(this.data);
    am4core.useTheme(am4themes_animated);
    am4core.addLicense("ch-custom-attribution");
    let chart = am4core.create("chartdiv-lines", am4charts.XYChart);
    chart.colors.step = 2;

    const summaryIntents = this.data;

    console.log('summaryIntents :',summaryIntents);

    // longitud de los ejes
    let sizeHistory = Object.keys(summaryIntents).length;

    let chartData = [];
    for (var i = 0; i < summaryIntents[Object.keys(summaryIntents)[0]].length; i++) {
      let newDate = new Date(summaryIntents[Object.keys(summaryIntents)[0]][i][0]*1000);
      let row = {date: newDate};

      for (var k = 0; k < sizeHistory; k++){
        row[Object.keys(summaryIntents)[k]] = summaryIntents[Object.keys(summaryIntents)[k]][i][1];
      }

      chartData.push(row);
    }
    console.log('chartData :',chartData);

    chart.data = chartData;

    // Create axes
    let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.minGridDistance = 50;
    
    dateAxis.renderer.labels.template.adapter.add("text", function(text) {
      if(text == undefined){
        return text;
      }
      if( Object.keys(es_months).includes(text.split(" ")[0])){
        
        return es_months[text.split(" ")[0]]+" "+text.split(" ")[1];
      }
      return text;
    })

    // Create series
    let valueAxis = chart.yAxes.push(new am4charts.ValueAxis() as any);
    function createAxisAndSeries(field, name, opposite, bullet) {
      
      if(chart.yAxes.indexOf(valueAxis) != 0){
        valueAxis.syncWithAxis = chart.yAxes.getIndex(0);
      }
      
      let series = chart.series.push(new am4charts.LineSeries());
      series.dataFields.valueY = field;
      series.dataFields.dateX = "date";
      series.strokeWidth = 2;
      // series.yAxis = valueAxis;
      series.name = name;
      series.tooltipText = "{name}: [bold]{valueY}[/]";
      series.tensionX = 0.8;
      series.showOnInit = true;
      
      let interfaceColors = new am4core.InterfaceColorSet();
      
      switch(bullet) {
        case "triangle":
          let bullet1 = series.bullets.push(new am4charts.Bullet());
          bullet1.width = 12;
          bullet1.height = 12;
          bullet1.horizontalCenter = "middle";
          bullet1.verticalCenter = "middle";
          
          let triangle = bullet1.createChild(am4core.Triangle);
          triangle.stroke = interfaceColors.getFor("background");
          triangle.strokeWidth = 2;
          triangle.direction = "top";
          triangle.width = 12;
          triangle.height = 12;
          break;
        case "rectangle":
          let bullet2 = series.bullets.push(new am4charts.Bullet());
          bullet2.width = 10;
          bullet2.height = 10;
          bullet2.horizontalCenter = "middle";
          bullet2.verticalCenter = "middle";
          
          let rectangle = bullet2.createChild(am4core.Rectangle);
          rectangle.stroke = interfaceColors.getFor("background");
          rectangle.strokeWidth = 2;
          rectangle.width = 10;
          rectangle.height = 10;
          break;
        default:
          let bullet = series.bullets.push(new am4charts.CircleBullet());
          bullet.circle.stroke = interfaceColors.getFor("background");
          bullet.circle.strokeWidth = 2;
          break;
      }
      
      valueAxis.renderer.line.strokeOpacity = 1;
      valueAxis.renderer.line.strokeWidth = 2;
      valueAxis.renderer.line.stroke = series.stroke;
      valueAxis.renderer.labels.template.fill = series.stroke;
      valueAxis.renderer.opposite = opposite;
    }

    for (var i = 0; i < Object.keys(summaryIntents).length; i++) {
      createAxisAndSeries(Object.keys(summaryIntents)[i], Object.keys(summaryIntents)[i], false, "circle");
      // console.log();
    }

    // Add legend
    chart.legend = new am4charts.Legend();

    // Add cursor
    chart.cursor = new am4charts.XYCursor();

  }

  private getGenerateData(data: any): Array<any> {
    const series: Array<any> = [];
    for (const intent in data) {
     
      if (data.hasOwnProperty(intent)) {
        const serie = {};
        serie['name'] = intent;
        serie['data'] = data[intent];
        series.push(serie);
      }
    }
    return series;
  }

  private getDate(date: Date) {
    let dateNumber = date.getTime();
    dateNumber = dateNumber / 1000;
    return Math.trunc(dateNumber);
  }
}
