import { Component, OnInit } from '@angular/core';
import { SortDescriptor } from '@progress/kendo-data-query';
import { PageChangeEvent } from '@progress/kendo-angular-grid';
import { debounceTime } from 'rxjs/operators';
import { ItemViewModel } from '../../store/store-model';
import { NotificationService } from '../../../_services/notification.service';
import { ActivatedRoute } from '@angular/router';
import { KGridHelper } from '../../../_helpers/k-grid.class';
import { Subject, Subscription } from 'rxjs';
import { UserService } from '../../user/user.service';
import { FleetClient } from '../clients.class';
import { ClientService } from '../clients.service';

@Component({
  selector: 'app-client-list',
  templateUrl: './client-list.component.html',
})
export class ClientListComponent implements OnInit {
  public openDialog = false;
  public openDialogConfirmation = false;

  private _clientList: FleetClient[] = [];

  public kGrid: KGridHelper = new KGridHelper();
  public searchEvent = new Subject<any>();
  public searchSubcription: Subscription = null;
  public expAccountList: any[] = [];
  public _clientModel: FleetClient;
  public title = '';
  public nowDate = new Date();
  public maxDate = new Date();

  public paymentTypeList = [
    { Id: 1, Name: 'Weekly' },
    { Id: 2, Name: 'Monthly' },
    { Id: 3, Name: 'Annually' }
  ];
  constructor(public _notificationService: NotificationService,
    private activatedRoute: ActivatedRoute,
    private _clientService: ClientService) { }

  ngOnInit() {
    this.initializeProps();
    this.getClientsList();
  }

  private initializeProps() {
    this.kGrid.loading = false;
    this.kGrid.pageSize = 20;
    this.kGrid.pageSizes = [20, 50, 100];
  }
  selectedType: any;
  OnSubmit() {
    this._clientModel.PaymentType = this.selectedType.Id;
    this._clientService.addOrUpdateClient(this._clientModel).subscribe((res) => {
      this._notificationService.notify('success', 'Client Added Successfully');
      this.getClientsList();
      this.openDialog = false;
    }, (err) => {
      this._notificationService.notify('danger', 'Something Went Wrong');
    });
  }

  AddClient() {
    this.openDialog = true;
    this._clientModel = new FleetClient();
  }

  EditClient(item) {
    this.openDialog = true;
    console.log(item);
    this._clientModel = item;
    this._clientModel.PaymentDue = new Date(item.PaymentDue);
    this.selectedType = this.paymentTypeList.find(x => x.Id === item.PaymentType);
  }

  public openConfirmPaymentDialog = false;
  openConfirmPayment(item) {
    this.openConfirmPaymentDialog = true;
  }

  public saving = false;
  ConfirmPaymentRecieved() {
    this.saving = true;
    this._clientService.ClientPaid().subscribe((res: any) => {
      this.saving = false;
    }, (error) => {
      this.saving = false;
    });
  }

  CloseConfirmPaymentRecieved() {
    this.openConfirmPaymentDialog = false;
  }
  public getClientsList() {
    this.kGrid.loading = true;
    this._clientService.getClients().subscribe((res: any) => {
      console.log(res);
      this._clientList = res;
      this.kGrid.data = [];
      this.kGrid.data = res;
      this.kGrid.totalRecords = this.kGrid.data.length;
      this.kGrid.gridView = { data: this.kGrid.data, total: this.kGrid.totalRecords };
      this.kGrid.loading = false;
    }, (err) => {
      this._notificationService.notify('danger', 'Something went wrong');
    });
  }


  public openDeleteConfirmationDialog = false;
  public deleting = false;
  CloseDeleteDialog() {
    this.openDeleteConfirmationDialog = false;
  }
  OpenDeleteConfirmationDialog(item) {
    this._clientModel = item;
    this.openDeleteConfirmationDialog = true;
  }
  ConfirmDelete() {
    this.deleting = true;
    this._clientService.deleteClient(this._clientModel.Id).subscribe((res: any) => {
      this._notificationService.notify('success', 'Deleted Successfully');
      this.deleting = false;
      this.getClientsList();
      this.openDeleteConfirmationDialog = false;
    }, (err) => {
      this._notificationService.notify('danger', 'Something Went Wrong');
    });
  }

  public getAccount(x: string, event: string) {
    // this._storeService.getAccountBySearch(x, event).subscribe((res: any) => {
    //   if (res) {
    //     if (event === 'E') {
    //       this.employeeAccountList = res;
    //     }
    //   }
    // }, err => {
    //   this._notificationService.notify('danger', err.msg);
    // });
  }

  public handleSearchEvents() {
    this.searchSubcription = this.searchEvent.pipe(
      debounceTime(400)).subscribe((x: any) => {
        console.log(x);
        if (x) {
          if (x.filter == 'Fk_EmployeAccount') {
            this.getAccount(x.event, 'E');
          }
        }
      });
  }

  public close(status) {
    this.openDialog = false;
    // this.openAddAdvacneInstallmentDialog = false;
  }


  public changePagesize(value: any) {
    this.kGrid.pageSize = +value;
    this.kGrid.skip = 0;
    // this.getCategory();
  }
  public sortChange(sort: SortDescriptor[]): void {
    if (sort[0].field == 'asd') { return; }
    this.kGrid.sort = sort;
    // this.sortData();
  }
  // private sortData() {
  //   this.kGrid.gridView = {
  //     data: orderBy(this.kGrid.data, this.kGrid.sort),
  //     total: this.kGrid.totalRecords
  //   };
  // }
  public pageChange(event: PageChangeEvent): void {
    this.kGrid.skip = event.skip;
    // this.getCategory();
  }
}