import {
  Component,
  OnInit,
  Input,
  EventEmitter,
  Output,
  ViewChild,
  OnChanges,
  SimpleChanges
} from '@angular/core';

import {
  Observable,
  of
} from 'rxjs';
import { Store } from '@ngrx/store';
import {
  catchError,
  map,
  tap,
  take
} from 'rxjs/operators';

import { Target } from '@overflow/commons-typescript/model/target';
import { TargetService } from '../../service/target.service';

import { Paginator } from 'primeng/primeng';
import { Page, PageParams} from '@overflow/commons-typescript';

@Component({
  selector: 'of-target-list',
  templateUrl: './list.component.html',
})
export class ListComponent implements OnInit, OnChanges {

  @Input() probeID;
  @Input() pageIdx;
  @Output() pageChange = new EventEmitter<number>();

  @ViewChild('paginator') paginator: Paginator;

  targetPage: Page<Target>;
  pending$: Observable<boolean>;
  error$: Observable<any>;

  constructor(
    private store: Store<any>,
    private targetService: TargetService,
  ) {
  }

  ngOnInit() {
    const pageParams: PageParams = {
      pageNo: 0,
      countPerPage: 2,
      sortCol: 'id',
      sortDirection: 'descending',
    };

    this.getTargetList(pageParams);
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['pageIdx'] && this.paginator) {
      const pageParams: PageParams = {
        pageNo: this.pageIdx,
        countPerPage: 2,
        sortCol: 'id',
        sortDirection: 'descending',
      };
      console.log(this.pageIdx);
      this.paginator.changePage(this.pageIdx);
      this.getTargetList(pageParams);
    }
  }

  private getTargetList(pageParams: PageParams) {

    this.targetService.readAllByProbeID(this.probeID, pageParams)
      .pipe(
        tap(() => {
          this.pending$ = of(true);
        }),
        map((page: Page<Target>) => {
          this.targetPage = page;
        }),
        catchError(err => {
          console.log(err);
          return err;
        }),
        tap(() => {
          this.pending$ = of(false);
        }),
        take(1),
      ).subscribe();
  }

  onRowSelect(event) {
    // this.router.navigate(['target'], { queryParams: { target: event.data.id } });
    // this.router.navigate(['target', event.data.id, 'info']);
  }

  onAddSensor(target: Target) {
    // this.target = target;
    // this.sensorSettingDisplay = true;
  }

  onPaginate(e) {
    this.pageChange.emit(e.page);
  }
}