import { Component, OnInit, AfterContentInit, Input, OnChanges } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { RPCClientError } from '@loafer/ng-rpc';

import * as DetailStore from '@overflow/probe/store/probe-host';
import { ProbeHostSelector } from '@overflow/probe/store';
import { Probe, ProbeHost } from '@overflow/commons-typescript/model/probe';


@Component({
  selector: 'of-probe-summary',
  templateUrl: './probe-summary.component.html',
})
export class ProbeSummaryComponent implements OnInit, AfterContentInit, OnChanges {

  @Input() probe: Object;
  @Input() visible: boolean;

  probeHost$ = this.detailStore.pipe(select(ProbeHostSelector.select('probeHost')));
  probeHost: ProbeHost;

  constructor(
    private detailStore: Store<DetailStore.State>,
  ) { }

  ngOnInit() {
    this.probeHost$.subscribe(
      (probeHost: ProbeHost) => {
        if (probeHost) {
          console.log(probeHost);
          this.probeHost = probeHost;
        }
      },
      (error: RPCClientError) => {
        console.log(error.response.message);
      }
    );
  }

  ngAfterContentInit() {
    console.log('$$$$$$$$$$');
    console.log(this.probe);
    console.log('$$$$$$$$$$');
    // this.detailStore.dispatch(
    //   new DetailStore.ReadByProbe(this.probe)
    // );
  }

  ngOnChanges() {
  }

}