import { Component, OnInit } from '@angular/core';
import * as Chartist from 'chartist';
import { Title } from '@angular/platform-browser';
import { ApiService } from 'app/api.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  public numeroSocios: number = 0;
  public numeroUsuarios: number = 0;
  public pedidosEntregados: number = 0;
  public pedidosPendientes: number = 0;

  public ventasHoy: number = 0;
  public ventasMes: number = 0;
  public ventasSemana: number = 0;
  public ventasAno: number = 0;

  public floresHoy: number = 0;
  public floresMes: number = 0;
  public floresSemana: number = 0;
  public floresAno: number = 0;

  public arrayReparto:any = [];
  public arrayTransito:any = [];
  public arrayDevueltos:any = [];
  public arrayProgramados:any = [];


  constructor(private title: Title, private apiService: ApiService) { 
    this.title.setTitle("Escritorio");
    this.apiService.getStats().subscribe((data:any)=>{
      this.numeroSocios = data.numeroSocios;
      this.numeroUsuarios = data.numeroUsuarios;
      this.pedidosEntregados = data.pedidosEntregados;
      this.pedidosPendientes = data.pedidosPendientes;
      this.ventasHoy = data.ventasHoy;
      this.ventasMes = data.ventasMes;
      this.ventasSemana = data.ventasSemana;
      this.ventasAno = data.ventasAno;
      this.floresHoy = data.floresHoy;
      this.floresMes = data.floresMes;
      this.floresAno = data.floresAno;
      this.arrayReparto = data.arrayReparto;
      this.arrayTransito = data.arrayTransito;
      this.arrayDevueltos = data.arrayDevueltos;
      this.arrayProgramados = data.arrayProgramados;
    });
  }

  deleteFile(x: any) {
    console.log(x);
  }
  startAnimationForLineChart(chart){
      let seq: any, delays: any, durations: any;
      seq = 0;
      delays = 80;
      durations = 500;

      chart.on('draw', function(data) {
        if(data.type === 'line' || data.type === 'area') {
          data.element.animate({
            d: {
              begin: 600,
              dur: 700,
              from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
              to: data.path.clone().stringify(),
              easing: Chartist.Svg.Easing.easeOutQuint
            }
          });
        } else if(data.type === 'point') {
              seq++;
              data.element.animate({
                opacity: {
                  begin: seq * delays,
                  dur: durations,
                  from: 0,
                  to: 1,
                  easing: 'ease'
                }
              });
          }
      });

      seq = 0;
  };
  startAnimationForBarChart(chart){
      let seq2: any, delays2: any, durations2: any;

      seq2 = 0;
      delays2 = 80;
      durations2 = 500;
      chart.on('draw', function(data) {
        if(data.type === 'bar'){
            seq2++;
            data.element.animate({
              opacity: {
                begin: seq2 * delays2,
                dur: durations2,
                from: 0,
                to: 1,
                easing: 'ease'
              }
            });
        }
      });

      seq2 = 0;
  };
  ngOnInit() {
      /* ----------==========     Daily Sales Chart initialization For Documentation    ==========---------- 
      const dataDailySalesChart: any = {
          labels: ['M', 'J', 'V', 'S', 'D', 'L', 'M'],
          series: [
              [12, 17, 7, 17, 23, 18, 38]
          ]
      };

     const optionsDailySalesChart: any = {
          lineSmooth: Chartist.Interpolation.cardinal({
              tension: 0
          }),
          low: 0,
          high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
          chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
      }

      var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);

      this.startAnimationForLineChart(dailySalesChart);


      /* ----------==========     Completed Tasks Chart initialization    ==========---------- 

      const dataCompletedTasksChart: any = {
          labels: ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A','S','O','N','D'],
          series: [
              [230, 750, 450, 300, 280, 240, 200, 190, 280, 240, 200, 190]
          ]
      };

     const optionsCompletedTasksChart: any = {
          lineSmooth: Chartist.Interpolation.cardinal({
              tension: 0
          }),
          low: 0,
          high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
          chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
      }

      var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);

      // start animation for the Completed Tasks Chart - Line Chart
      this.startAnimationForLineChart(completedTasksChart);



      /* ----------==========     Emails Subscription Chart initialization    ==========---------- 

      var datawebsiteViewsChart = {
        labels: ['E', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
        series: [
          [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]

        ]
      };
      var optionswebsiteViewsChart = {
          axisX: {
              showGrid: false
          },
          low: 0,
          high: 1000,
          chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
      };
      var responsiveOptions: any[] = [
        ['screen and (max-width: 640px)', {
          seriesBarDistance: 5,
          axisX: {
            labelInterpolationFnc: function (value) {
              return value[0];
            }
          }
        }]
      ];
      var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions);

      //start animation for the Emails Subscription Chart
      this.startAnimationForBarChart(websiteViewsChart);
      */
  }

}
