import { Component, ViewChild, OnInit, Input, AfterContentInit, OnDestroy } from '@angular/core';
import { Observable, of, Subscription } from 'rxjs';
import { catchError, exhaustMap, map, tap } from 'rxjs/operators';

import { Router, ActivatedRoute } from '@angular/router';
import { Sensor } from '@overflow/commons-typescript/model/sensor';
import { Infra } from '@overflow/commons-typescript/model/infra';
import { Store, select } from '@ngrx/store';

import { RPCClientError } from '@loafer/ng-rpc';
// import * as SensorListStore from '@overflow/sensor/store/list';
// import { PageParams, Page } from 'app/commons/model';
import { Target } from '@overflow/commons-typescript/model/target';


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

  // infra$: Observable<Infra>;
  // infraSubscription$: Subscription;
  // sensorsSubscription$: Subscription;
  // // sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));
  // target$: Observable<Target>;
  //
  // infraId = null;
  // infra: Infra;
  // sensors: Sensor[];
  // sensorsCount = 0;
  // sensorSettingDisplay = false;
  //
  // pageSize = '10';
  // totalLength = 0;
  // currPage = 0;

  constructor(
    // private router: Router,
    // private route: ActivatedRoute,
    // private store: Store<any>,
  ) { }

  ngOnInit() {
    // this.infraSubscription$ = this.infra$.subscribe(
    //   (infra: Infra) => {
    //     this.infra = infra;
    //   },
    //   (error: RPCClientError) => {
    //     console.log(error.response.message);
    //   }
    // );
    // this.sensorsSubscription$ = this.sensors$.subscribe(
    //   (page: Page) => {
    //     if (page) {
    //       this.sensorsCount = page.totalElements;
    //       this.sensors = page.content;
    //     }
    //   },
    //   (error: RPCClientError) => {
    //     console.log(error.response.message);
    //   }
    // );
  }

  ngAfterContentInit() {
    // this.infraId = this.route.snapshot.paramMap.get('id');
    // this.getInfra();
    // this.getSensors(this.currPage);
  }

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

  getInfra() {
    // this.infraDetailStore.dispatch(
    //   new InfraDetailStore.Read(
    //     { id: this.infraId }
    //   )
    // );
  }

  getSensors(pageIndex) {
    // const pageParams: PageParams = {
    //   pageNo: pageIndex + '',
    //   countPerPage: this.pageSize,
    //   sortCol: 'id',
    //   sortDirection: 'descending'
    // };
    // this.sensorListStore.dispatch(
    //   new SensorListStore.ReadAllByInfra(
    //     { id: this.infraId, pageParams: pageParams }
    //   )
    // );
  }

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

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

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

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

  onTraceroute() {
    // alert('지원 예정');
  }


  onDisplayNameChange(value: string) {
    // if (value === this.infra.target.displayName) {
    //   return;
    // }
    // const target = this.infra.target;
    // target.displayName = value;
    // this.targetModifyStore.dispatch(
    //   new TargetModifyStore.Modify(target)
    // );

    // const modifySuccessSubscription$: Subscription = this.target$.subscribe(
    //   (t: Target) => {
    //     if (t) {
    //     }
    //     if (modifySuccessSubscription$) {
    //       modifySuccessSubscription$.unsubscribe();
    //     }
    //   },
    //   (error: RPCClientError) => {
    //     console.log(error);
    //   }
    // );
  }

  onDisplayNameChangeKeypress(event, value) {
    if (event.key === 'Enter') {
      this.onDisplayNameChange(value);
    }
  }

}