import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {AuthService} from '../service/auth.service';
import {DataStateChangeEvent, GridDataResult, PagerSettings, SelectableSettings,} from '@progress/kendo-angular-grid';
import {State, process} from '@progress/kendo-data-query';
import {PayInModel} from '../models/pay-in.model';
import {RewardExModel} from '../models/reward-ex.model';
import {SelectionEvent} from '@progress/kendo-angular-grid/dist/es2015/selection/types';
import {RewardService} from '../service/reward.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-list-all-rewards',
  templateUrl: './list-all-rewards.component.html',
  styleUrls: ['./list-all-rewards.component.scss']
})
export class ListAllRewardsComponent implements OnInit {
  @Output() confirmSelection = new EventEmitter<RewardExModel[]>();
  @Input() selectedRewards: RewardExModel[] = [];
  @Input() showNonPaidOnly: false;
  @Input() filterByPayOutId = 0;
  @Input() filterByUserId = '';
  public today = new Date();
  public selected: number[] = [];

  public gridData: RewardExModel[] = [] ;
  public gridView: GridDataResult;
  public state: State = {
    skip: 0,
    take: 20,
    filter: {logic: 'and', filters: []}
  };
  public loading = true;

  @Input() public pageable: PagerSettings = {
    pageSizes: [2, 5, 10, 15, 20, 30],
    previousNext: true
  };

  public selectTableSettings: SelectableSettings | boolean = true;
  // private multipleSelection: SelectableSettings = {
  //   checkboxOnly: false,
  //   mode: 'multiple',
  //   drag: false
  // };

  public EnableSelectButton = true;

  @Output() RewardsSelected: EventEmitter<PayInModel[]> = new EventEmitter<PayInModel[]>();

  constructor(private auth: AuthService, private rs: RewardService, private router: Router) { }

  ngOnInit(): void {
    this.EnableSelectButton = this.showNonPaidOnly;
    if ( this.showNonPaidOnly ){
      this.state.filter.filters.push({
        field: 'PayOutId',
        operator: 'isnull',
        value: ''
      });
    }
    this.selectedRewards.forEach(v => this.selected.push(v.Id));
    this.loadRewardGrid();
  }

  public loadRewardGrid(): void {
    this.loading = true;
    this.gridView = {total: 0, data: []};
    this.rs.getRewardExList(this.state).subscribe(
      resp => {
        this.gridView.total = resp.total;
        resp.data.forEach( v => this.gridView.data.push(new RewardExModel(v)) );
        this.loading = false;
      }, error => {
        this.loading = false;
      }, () => {
        this.loading = false;
      }
    );

  }


  public dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    this.loadRewardGrid();
  }

  private photoURL(peopleId: any): string {
    const url = this.auth.getUrl('avatar/') + peopleId;
    return 'url("' + url + '")';
  }

  public onSelectionEmit(): void {
    this.confirmSelection.emit(this.selectedRewards);
  }

  public onSelectionChange(e: SelectionEvent): void {
    this.selectedRewards = this.selectedRewards.filter( v => ! e.deselectedRows.find( deSel => v.Id === deSel.dataItem.Id ) );
    e.selectedRows.forEach( v => {
      if (! this.selectedRewards.find(existing => existing.Id === v.dataItem.Id) ){
        this.selectedRewards.push(v.dataItem);
      }
    });
    return;
  }

  public onGoDetail(item: RewardExModel): void{
    this.router.navigate(['reward-paid/', item.PayOutId]).then();
  }

  public onGoPayment( item: RewardExModel): void{
    this.router.navigate(['reward-paid/']).then();
  }
}
