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 { Store, select } from '@ngrx/store';
import { TargetService } from '../../service/target.service';
import { InfraService } from '@overflow/infra/service/infra.service';
import {PageParams} from '@overflow/commons-typescript/model/commons/PageParams';
import { catchError, map, tap, take } from 'rxjs/operators';
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;

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

    ngOnInit() {
        // this.infrasSubscription$ = this.infras$.subscribe(
        //     (page: Page) => {
        //         if (!page) {
        //             return;
        //         }
        //         this.totalLength = page.totalElements;
        //         this.infras = page.content;
        //     },
        //     (error: RPCClientError) => {
        //         console.log(error);
        //     }
        // );
      const pageParams: PageParams = {
        pageNo: 0,
        countPerPage: 10,
        sortCol: 'id',
        sortDirection: 'descending',
      };

      this.targetService.readAllByProbeID(1, pageParams)
        .pipe(
          tap(() => {

          }),
          map((r: Page<Target>) => {
              console.log(r);
          }),
          catchError(err => {
            console.log(err);
            return err;
          }),
          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);
    }

}