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 { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
import { Page } from '@overflow/commons-typescript/model/commons/Page';

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

  // infrasSubscription$: Subscription;
  // infras$: Observable<Infra[]>;
  // infras: Infra[];
  // probe: Probe;
  // target: Target = null;
  // sensorSettingDisplay = false;

  // pageSize = '10';
  // totalLength = 0;
  // currPage = 0;
  page: Page<Target>;
  pending$: Observable<boolean>;
  error$: Observable<any>;

  totalLength: number;
  targets: Object;

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

  ngOnInit() {
    const pageParams: PageParams = {
      pageNo: 0,
      countPerPage: 2,
      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();
  }

  ngAfterContentInit() {
    // this.route.params.subscribe((params: any) => {
    //     this.probe = {
    //         id: params['id'],
    //     };
    //     this.getInfras(0);
    // });
  }

  ngOnDestroy() {
    // if (this.infrasSubscription$) {
    //     this.infrasSubscription$.unsubscribe();
    // }
  }

  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;
  }

  onSensorSettingClose() {
    // this.sensorSettingDisplay = false;
  }

  onPaging(e) {
    // this.getInfras(e.page);
  }

  onPaginate(event) {

  }
}