import { Component, OnInit, Input } from '@angular/core';
import { SortDescriptor, orderBy } from '@progress/kendo-data-query';
import { PageChangeEvent, GridDataResult } from '@progress/kendo-angular-grid';
import { HealthFacilityService } from '../../../health-facility.service';

@Component({
  selector: 'app-hf-services',
  templateUrl: './hf-services.component.html',
  styles: [`
  .table th, .table td{
    border: none !important;
    vertical-align: middle !important;
  }
  
  .table tbody tr {
    border-top: 1px solid #c8ced3 !important;
    border-bottom: 1px solid #c8ced3 !important;
  }
  .table tbody tr:last-child
{
   border-bottom: none !important;
}

  `]
})
export class HFServicesComponent implements OnInit {
  @Input() public hfServices: any[] = [];
  public multiple = false;
  public allowUnsort = true;
  public sort: SortDescriptor[] = [];
  public gridView: GridDataResult;
  public pageSize = 5;
  public skip = 0;
  constructor() { }

  ngOnInit() {
    this.loadHFfServices();
  }
  public changePagesize(value: any) {
    this.pageSize = +value;
    this.loadHFfServices();
  }
  public dropValChanged(event: any) {
    console.log(event);
  }
  public sortChange(sort: SortDescriptor[]): void {
    if (sort[0].field == 'asd') {
      return;
    }
    this.sort = sort;
    this.loadHFfServices();
  }
  private loadHFfServices(): void {
    this.gridView = {
      data: orderBy(this.hfServices, this.sort),
      total: this.hfServices.length
    };
  }
  public pageChange(event: PageChangeEvent): void {
    this.skip = event.skip;
    this.loadHFfServices();
  }
  public onPageChange(state: any): void {
    this.pageSize = state.take;
  }

}