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';
import {PlatformLocation} from '@angular/common';

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

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

  @ViewChild('paginator') paginator: Paginator;

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

  countPerPage: number;

  constructor(
    private store: Store<any>,
    private targetService: TargetService,
    private location: PlatformLocation
  ) {
    this.countPerPage = 2;
  }

  ngOnInit() {
    // this.getTargetList();
  }

  ngOnChanges(changes: SimpleChanges): void {
    // console.log(changes);
    if (changes['pageIdx']) {
      // console.log(this.pageIdx);
      this.getTargetList();
      // const p: number = this.pageIdx - 1;
      // this.paginator.changePage(this.pageIdx);
    }
  }

  private getTargetList() {
    if (this.pageIdx <= 0 || this.pageIdx === undefined || this.pageIdx === null || isNaN(this.pageIdx)) {
      this.pageIdx = 1;
    }

    const p: number = this.pageIdx - 1;

    const pageParams: PageParams = {
      pageNo: p,
      countPerPage: this.countPerPage,
      sortCol: 'id',
      sortDirection: 'descending',
    };

    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.targetSelect.emit(event.data);
  }

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

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