import { Component, OnInit, AfterContentInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Infra } from '@overflow/commons-typescript/model/infra';
import { Probe } from '@overflow/commons-typescript/model/probe';
import { Target } from '@overflow/commons-typescript/model/target';

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

import { TargetService } from '../../service/target.service';
import { InfraService } from '@overflow/infra/service/infra.service';
import { Page, PageParams } from '@overflow/commons-typescript/core/model';

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

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

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

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

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

  getInfras(pageNo) {
    // const pageParams: PageParams = {
    //     pageNo: pageNo + '',
    //     countPerPage: this.pageSize,
    //     sortCol: 'id',
    //     sortDirection: 'descending'
    // };
    // this.infraListStore.dispatch(
    //     new InfraListStore.ReadAllByProbe(
    //         { probe: this.probe, pageParams: pageParams }
    //     )
    // );
  }

  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(event) {

  }
}