import { NgxMatDatetimePicker } from '@angular-material-components/datetime-picker';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { SharedFilterService } from 'projects/bytebot-html/src/app/services/shared-filters.service';

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

  form: FormGroup;

  channels = [
    {
      value: 'W',
      label: 'Whatsapp'
    },
    {
      value: 'F',
      label: 'Facebook'
    }
  ];

  endDateTime: Date;
  startDateTime: Date;
  selectedChannel: string;
  isLoading = false;

  @Input()
  header: string;

  @Input()
  headerDesc: string;

  @Input()
  icon = '<i class="fa fa-bar-chart-o"></i>';

  @Output()
  filtered: EventEmitter<any> = new EventEmitter();

  constructor(
    protected route: ActivatedRoute,
    protected router: Router,
    protected sharedFilterService: SharedFilterService) {
  }

  ngOnInit() {
    const title = this.route.snapshot.data['title'];
    const titleDesc = this.route.snapshot.data['titleDesc'];
    this.header = title;
    this.headerDesc = titleDesc;
    this.form = new FormGroup({
      id: new FormControl('', Validators.required),
      period: new FormControl('', Validators.required)
    });

    this.endDateTime = new Date();
    this.startDateTime = this.getStartDate(this.endDateTime);
    this.search();
  }

  search() {
    const filters = {startDateTime: this.startDateTime, endDateTime: this.endDateTime, channel: this.selectedChannel};
    this.filtered.emit(filters);
  }

  private getStartDate(endDate: Date): Date {
    return new Date(Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(), 5, 0, 0));
  }

  keyup(event) {
    event.preventDefault();
  }

  clickEvent(event: NgxMatDatetimePicker<any>) {
    event.open();
  }

}
