import { Component, OnInit, Inject, AfterContentInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Store, select } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';
// import * as DetailStore from '../../store/detail';
// import * as ModifyStore from '../../store/modify';
// import { DetailSelector, ModifySelector } from '../../store';
import { Probe } from '@overflow/commons-typescript/model/probe';
import { ConfirmationService, Message } from 'primeng/primeng';
import * as CIDR from 'ip-cidr';
import { Subscription } from 'rxjs/Subscription';
import { MessageService } from 'primeng/components/common/messageservice';
// import { SettingComponent as DiscoverySettingComponent } from '@overflow/discovery/component/setting/setting.component';


@Component({
  selector: 'of-probe-detail',
  templateUrl: './detail.component.html',
  providers: [ConfirmationService, MessageService]
})
export class ProbeDetailComponent implements OnInit, AfterContentInit, OnDestroy {

  probeSubscription$: Subscription;
  // probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
  // modifySuccess$ = this.modifyStore.pipe(select(ModifySelector.select('modifiedProbe')));
  probe: Probe = null;
  IPRange: string;
  display = false;
  msgs: Message[] = [];

  constructor(
    private route: ActivatedRoute,
    // private detailStore: Store<DetailStore.State>,
    // private modifyStore: Store<ModifyStore.State>,
    private confirmationService: ConfirmationService,
    private messageService: MessageService
  ) { }

  ngOnInit() {
    // this.probeSubscription$ = this.probe$.subscribe(
    //   (probe: Probe) => {
    //     if (probe) {
    //       this.probe = probe;
    //       this.arrangeInfo();
    //     }
    //   },
    //   (error: RPCClientError) => {
    //     console.log(error.response.message);
    //   }
    // );
  }

  ngOnDestroy() {
    if (this.probeSubscription$) {
      this.probeSubscription$.unsubscribe();
    }
  }

  ngAfterContentInit() {
    // const probeId = this.route.snapshot.paramMap.get('id');
    // this.detailStore.dispatch(
    //   new DetailStore.Read(
    //     { id: probeId }
    //   )
    // );
  }

  arrangeInfo() {
    const cidr = new CIDR(this.probe.cidr);
    if (!cidr.isValid()) {
      return;
    }
    this.IPRange = cidr.addressStart.address + ' ~ ' + cidr.addressEnd.address;
  }

  onDiscoveryClick() {
    this.display = true;
  }

  onDiscoveryClose() {
    this.display = false;
  }

  onRemoveClick() {
    this.confirmationService.confirm({
      header: 'Confirmation',
      icon: 'fa fa-trash',
      message: 'Are you sure to remove this Probe?',
      accept: () => {
        // this.router.navigate(['probes/list']);
      },
      reject: () => {
      }
    });
  }

  onDisplayNameChange(value: string) {
    // 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);
    }
  }

}