import { Component, OnInit } from '@angular/core';
import { ThemePalette } from '@angular/material';
import { NotificationService, NotificationType } from '@xdf/commons';
import { CustomerInteractionService } from '../../../../services/customer-interaction.service';

@Component({
  selector: 'byte-customer-interaction',
  templateUrl: './customer-interaction.component.html',
  styleUrls: ['./customer-interaction.component.scss']
})
export class CustomerInteractionComponent implements OnInit {

  links = ['Graph', 'Detail'];
  activeLink = this.links[0];
  latestDate = new Date();
  existDateRange = false;
  isLoading = false;
  startDate: Date;
  endDate: Date;
  data: any;
  isDataLoaded = false;

  background: ThemePalette = undefined;

  panelOptions = {
    elevation: false,
    title: {
      primary: 'Mensajes por horario de actividad del cliente',
      secondary: ''
    }
  };

  tracingPanelOptions = {
    elevation: false,
    title: {
      primary: 'dashboards.customer.interaction.tracing.intent',
      secondary: ''
    }
  };

  avgIntentOptions = {
    elevation: false,
    title: {
      primary: 'dashboards.customer.interaction.avg.intent',
      secondary: ''
    }
  };

  goalPanelOptions = {
    elevation: false,
    title: {
      primary: 'dashboards.customer.interaction.goals',
      secondary: ''
    }
  };

  intentCustomer = {
    elevation: false,
    title: {
      primary: 'dashboards.customer.interaction.intents',
      secondary: ''
    }
  };

  sentencesCustomer = {
    elevation: false,
    title: {
      primary: 'dashboards.customer.interaction.sentences',
      secondary: ''
    }
  };

  constructor(
    protected customerInteractionService: CustomerInteractionService,
    protected notificationService: NotificationService
  ) { }

  ngOnInit() {
  }

  toggleBackground() {
    this.background = this.background ? undefined : 'primary';
  }

  addLink() {
    this.links.push(`Link ${this.links.length + 1}`);
  }

  filter(filters) {
    this.isDataLoaded = false;
    this.isLoading = true;
    this.startDate = filters['startDateTime'];
    this.endDate = filters['endDateTime'];
    const channel = filters['channel'];
    this.customerInteractionService.getSummary(this.startDate, this.endDate, channel).subscribe(response => {
      this.data = response;
      this.isLoading = false;
      this.isDataLoaded = this.isValidData(this.data);
      if (!this.isDataLoaded) {
        this.notificationService.showMessage('No se encontró información para el rango de fechas seleccionado', '', NotificationType.error);
      }
    }, err => {
      this.isLoading = false;
    });
  }
  private isValidData(data: any): boolean {
    if (data['sessionFlow'] && data['sessionFlow']['intent'] && data['sessionFlow']['sentence']) {
      if (data['sessionFlow']['intent']['total'] > 0 || data['sessionFlow']['sentence']['total'] > 0) {
        return true;
      }
    }
    return false;
  }

}
