import { Component, ViewChild, OnInit, Input, AfterContentInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Sensor } from 'packages/sensor/model';
import { Infra } from 'packages/infra/model';
import { Store, select } from '@ngrx/store';
import { DetailSelector as InfraDetailSelector } from 'packages/infra/store';
import * as InfraDetailStore from 'packages/infra/store/detail';
import { Subscription } from 'rxjs/Subscription';
import { RPCClientError } from '@loafer/ng-rpc/protocol';
import { sensorListSelector } from 'packages/sensor/store';
import * as SensorListStore from 'packages/sensor/store/list';
import { PageParams, Page } from 'app/commons/model';
// import { target } from 'packages/target/store';
// import * as SensorListStore from 'packages/sensor/store/list';


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

  infraSubscription$: Subscription;
  infra$ = this.infraDetailStore.pipe(select(InfraDetailSelector.select('infra')));
  sensorsSubscription$: Subscription;
  sensors$ = this.sensorListStore.pipe(select(sensorListSelector.select('page')));

  targetSubscription$: Subscription;

  infraId = null;
  infra: Infra;
  sensors: Sensor[];
  sensorsCount = 0;
  sensorSettingDisplay = false;

  pageSize = '10';
  totalLength = 0;
  currPage = 0;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private infraDetailStore: Store<InfraDetailStore.State>,
    private sensorListStore: Store<SensorListStore.State>
  ) { }

  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) {
    console.log(value);
    // if (value === this.probe.displayName) {
    //   return;
    // }
    // this.probe.displayName = value;
    // this.modifyStore.dispatch(
    //   new ModifyStore.Modify(this.probe)
    // );

    // const modifySuccessSubscription$: Subscription = this.modifySuccess$.subscribe(
    //   (probe: Probe) => {
    //     if (probe) {
    //       this.msgs = [];
    //       this.msgs.push({ severity: 'success', summary: 'Succeed', detail: 'Probe name has changed.' });
    //     }
    //     if (modifySuccessSubscription$) {
    //       modifySuccessSubscription$.unsubscribe();
    //     }
    //   },
    //   (error: RPCClientError) => {
    //     console.log(error.response.message);
    //   }
    // );
  }

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

}