import { AfterViewInit, Component, HostListener, Input, OnInit, ViewChild } from '@angular/core';
import { PeityComponent } from '@xdf/graph';
import { PetyWidgetModel } from '../summary-peti-widget/summary-peti-widget.component';

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';

@Component({
  selector: 'byte-inactivity-sesion',
  templateUrl: './inactivity-sesion.component.html',
  styleUrls: ['./inactivity-sesion.component.scss']
})
export class InactivitySesionComponent implements OnInit, AfterViewInit {

  @Input() options = {
    width: 200,
    height: 60,
    fill: '#dfecf9',
    stroke: '#024990',
    strokeWidth: 1
  };
  @Input() values = [1, 12, 3, 15, 5, -1, 10];
  @Input() header;
  @Input() value: PetyWidgetModel;

  @ViewChild('peti', { static: false })
  peti: PeityComponent;
  parametro1: String;
  parametro2: String;
  valor1: number;
  valor2: number;
  valor: number;
  decision: Boolean;
  tip: String;

  constructor() { }

  ngOnInit() {
    this.valor = this.value.value;
    this.decision = this.Ishour(this.valor);
    this.Calculos(this.valor);
  }

  ///funciones
  Ishour(val: number): Boolean {
    if (val > 60) return true
    else return false
  }


  Calculos(val: number) {
    if (val >= 86400) {
      this.valor1 = Number(Math.trunc(val / 86400))
      this.valor2 = Math.trunc((val % 86400) / 3600)
      this.parametro1 = "DIAS"
      this.parametro2 = "HORAS"

      this.tip = "Ultima actividad hace " + this.valor1 + " DIAS " + this.valor2 + " HORAS " + Math.trunc((val % 3600) / 60) + " MINUTOS " + val % 60 + " SEGUNDOS "

    } else if (val >= 3600) {
      this.valor1 = Number(Math.trunc(val / 3600))
      this.valor2 = Math.trunc((val % 3600) / 60)
      this.parametro1 = "HORAS"
      this.parametro2 = "MINUTOS"

      this.tip = "Ultima actividad hace " + this.valor1 + " HORAS " + this.valor2 + " MINUTOS " + val % 60 + " SEGUNDOS "

    } else if (val >= 60) {
      this.valor1 = Number(Math.trunc(val / 60))
      this.valor2 = val % 60
      this.parametro1 = "MINUTOS"
      this.parametro2 = "SEGUNDOS"

      this.tip = "Ultima actividad hace " + this.valor1 + " MINUTOS " + this.valor2 + " SEGUNDOS "
    } else {
      this.valor1 = val
      this.parametro1 = "SEGUNDOS"
      this.tip = "Ultima actividad hace " + this.valor1 + " SEGUNDOS "
    }
  }

  //endfunciones

  ngAfterViewInit() {
    if (this.peti) {
      const width = window.innerWidth;
      this.updateWidth(width);
      this.peti.updateSize();
    }
    var chart = am4core.create("chartdiv-inactivity", am4charts.XYChart);
    var colors = new am4core.ColorSet();
    // chart.width = am4core.percent(100);
    // chart.height = 70;

    const dataForChart = [];
    let cont = 8;
    this.values.forEach(x => {
      const date = new Date(2020, 0, 1, cont, 0, 0);
      cont++;

      dataForChart.push({
        "date": date,
        "value": x
      });

    });
    chart.data = dataForChart;

    // chart.titles.template.fontSize = 10;
    // //chart.titles.template.textAlign = "left";
    // chart.titles.template.isMeasured = false;
    // chart.titles.create().text = "AAPL (Price)";

    // chart.padding(30, 5, 2, 5);

    // var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    // // dateAxis.renderer.grid.template.disabled = true;
    // // dateAxis.renderer.labels.template.disabled = true;
    // dateAxis.startLocation = 0.5;
    // dateAxis.endLocation = 0.7;
    // dateAxis.cursorTooltipEnabled = false;

    // var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    // valueAxis.min = 0;
    // // valueAxis.renderer.grid.template.disabled = true;
    // // valueAxis.renderer.baseGrid.disabled = true;
    // // valueAxis.renderer.labels.template.disabled = true;
    // valueAxis.cursorTooltipEnabled = false;
    // valueAxis.title.text = "Segundos";
    // valueAxis.renderer.labels.template.adapter.add("text", function(text) {
    //   return text + "s";
    // });

    // chart.cursor = new am4charts.XYCursor();
    // // chart.cursor.lineY.disabled = true;
    // chart.cursor.behavior = "none";

    // var series = chart.series.push(new am4charts.LineSeries());
    // series.tooltipText = "{date}: [bold]{value}";
    // // series.tooltipHTML = "<img src='https://www.amcharts.com/lib/3/images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>{date}: [bold]{value}</b></span>";
    // series.dataFields.dateX = "date";
    // series.dataFields.valueY = "value";
    // series.fillOpacity = 0.6;
    // series.tensionX = 0.8;
    // series.strokeWidth = 2;
    // series.stroke = colors.getIndex(0);

    // // render data points as bullets
    // var bullet = series.bullets.push(new am4charts.CircleBullet());
    // bullet.circle.opacity = 0;
    // bullet.circle.fill = colors.getIndex(0);
    // bullet.circle.propertyFields.opacity = "opacity";
    // bullet.circle.radius = 3;


  }

  @HostListener('window:resize', ['$event'])
  public onResize(event) {
    const width = event.target.innerWidth;
    this.updateWidth(width);
  }

  private updateWidth(width: number) {
    if (width >= 1600) {
      this.options.width = 300;
    } else if (width >= 1350) {
      this.options.width = 200;
    } else if (width >= 768) {
      this.options.width = 150;
    } else if (width >= 576) {
      this.options.width = 200;
    } else {
      this.options.width = 300;
    }
  }



}
