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

// import { ToogleService } from '@xdf/layouts';
import { Chart } from 'angular-highcharts';
import * as Highcharts from 'highcharts';
import { Subscription } from 'rxjs';

@Component({
  selector: 'byte-heat-map',
  templateUrl: './heat-map.component.html',
  styleUrls: ['./heat-map.component.scss']
})
export class HeatMapComponent implements OnInit, OnDestroy {

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

  @Input()
  minDate: Date;

  @Input()
  maxDate: Date;

  subscriptionToogle: Subscription;

  chart: Chart;

  constructor(
    // protected toogleService: ToogleService
  ) {

  }
  ngOnDestroy(): void {
    if (this.subscriptionToogle) {
      this.subscriptionToogle.unsubscribe();
    }
  }

  ngOnInit() {
    if (!this.maxDate || !this.minDate) {
      return;
    }
    this.chart = new Chart({
      chart: {
        marginTop: 50,
        marginBottom: 100,
        marginLeft: 150,
        marginRight: 40,
        type: 'heatmap',
        events: {
          load: (event: any) => {
            event.target.reflow();
          }
        }
      },

      boost: {
        useGPUTranslations: true
      },
      credits: {
        enabled: false
      },
      title: {
        text: '',
        align: 'center',
        x: 40
      },
      exporting: {
        enabled: false
      },
      legend: {
        enabled: true
      },
      xAxis: {
        type: 'datetime',
        min: this.minDate.getTime(),
        max: this.maxDate.getTime(),
        labels: {
          align: 'left',
          x: 5,
          y: 14,
          format: '{value:%d/%m}' // long month
        },
        showLastLabel: false,
        tickLength: 10,
        tickWidth: 1
      },

      yAxis: {
        title: {
          text: null
        },
        labels: {
          formatter() {
            // return 'H' + (this.value + 1) + ': ' + (this.value < 10 ? '0' : '') + this.value + ':00' ;
            return 'H' + (this.value + 1) + ': ' + (3 * this.value < 10 ? '0' : '') + 3 * this.value + ':00'
            + ' - ' + ((3 * this.value + 3) < 10 ? '0' : '') + (3 * this.value + 3) + ':00';
          },
          format: 'H{value:}:{3*value}:00 - {value + 3}:00'
        },
        minPadding: 0,
        maxPadding: 0,
        startOnTick: false,
        endOnTick: false,
        tickPositions: [0, 1, 2, 3, 4, 5, 6, 7],
        tickWidth: 1,
        min: 0,
        max: 7,
        reversed: true
      },

      colorAxis: {
        stops: [
          [0, '#dceefa'],
          [0.5, '#85c5ed'],
          [1, '#1c84c6']
        ],
        min: 0,
        max: 25,
        startOnTick: false,
        endOnTick: false,
        labels: {
          format: '{value}'
        }
      },

      series: [{
        boostThreshold: 100,
        borderWidth: 4,
        nullColor: '#f3f3f4',
        borderColor: '#f3f3f4',
        colsize: 24 * 36e5, // one day
        tooltip: {
          headerFormat: '{point.x:%e %b}',
          // pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
          pointFormat: '<b>{point.value} mensajes</b>'
        },
        turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
        data: this.data
      }] as Array<any>

    });

    // this.subscriptionToogle = this.toogleService.changeEmitted$.subscribe(change => {
    //   setTimeout(() => {
    //     Highcharts.charts.forEach(chart => chart.reflow());;
    //     console.log("test");
    //   }, 500);
    // });
  }

}
