import { Component, OnInit, Input, AfterViewInit, Output, EventEmitter, AfterContentInit, OnChanges, SimpleChanges } from '@angular/core';
import { Observable } from 'rxjs';
import { ProbeHost, Probe } from '@overflow/commons-typescript/model/probe';
import { Store, select } from '@ngrx/store';
import * as ProbeStore from '../store/entity/probe';
import { ProbeSelector, ProbeDetailContainerSelector } from '../store';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'of-probe-detail-container',
  templateUrl: './probe-detail-container.html',
})
export class ProbeDetailContainerComponent implements OnInit, OnChanges {

  @Input() probeHostID: number;
  @Output() discovery = new EventEmitter<number>();
  probeHost$: Observable<ProbeHost>;
  pending$: Observable<boolean>;
  error$: Observable<any>;

  constructor(
    private store: Store<ProbeStore.State>,
    private route: ActivatedRoute,
  ) {
    this.pending$ = this.store.pipe(select(ProbeDetailContainerSelector.selectPending));
    this.error$ = this.store.pipe(select(ProbeSelector.selectError));
  }

  ngOnInit() {
    this.probeHost$ = this.store.pipe(select(ProbeSelector.selectOne(this.probeHostID)));
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.store.dispatch(new ProbeStore.Read(this.probeHostID));
  }

  onModify(probeHost: ProbeHost) {
    this.store.dispatch(new ProbeStore.Modify(probeHost.probe));
  }

  onDiscovery(probeHostID: number) {
    this.discovery.emit(probeHostID);
  }
}