import { Component, OnInit, Input } from '@angular/core';
import { Target } from '@overflow/commons-typescript/model/target';
import {TargetService} from '../service/target.service';

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


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

  @Input() targetID: number;

  target: Target;
  pending$: Observable<boolean>;
  error$: Observable<any>;

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

  ngOnInit() {
    this.targetService.read(this.targetID)
      .pipe(
        tap(() => {
          this.pending$ = of(true);
        }),
        map((target: Target) => {
          this.target = target;
        }),
        catchError(err => {
          console.log(err);
          return err;
        }),
        tap(() => {
          this.pending$ = of(false);
        }),
        take(1),
      ).subscribe();
  }

  onDisplayNameChangeKeypress(event, value) {

  }

  onDisplayNameChange(value) {

  }
}

//
// export class DetailComponent implements OnInit {
//
//   @Input() targetID: number;
//
//   target: Target;
//
//   // 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 store: Store<any>,
//     private targetService: TargetService,
//   ) { }
//
//   ngOnInit() {
//     this.tar
//     // 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);
//     // }
//   }
//
// }