import { Component, OnInit, Input } from '@angular/core';
import { Node } from 'app/nodes/node';
import { IData, IDataService } from 'app/nodes/configs.interfaces';
import { Observable } from 'rxjs/Observable';
import { ProcessingService } from 'app/nodes/processing.service';

@Component({
  selector: 'app-node-data-plotter',
  template: `
    <div>SYST: {{ processing.SYST }}</div>
    <div>DIAS: {{ processing.DIAS }}</div>
    <div>INST_HR: {{ processing.INST_HR }}</div>
    <div>AVG_HR: {{ processing.AVG_HR }}</div>
    <app-chart [data]="stream | async" [title]="data.name" style="margin-left: 3rem;" [animate]="false"></app-chart>
  `,
  styleUrls: ['./node-data-plotter.component.scss'],
  providers: [ProcessingService]
})
export class NodeDataPlotterComponent implements OnInit {
  @Input() node: Node;
  @Input() data: IData;
  @Input() smooth: boolean = true;

  stream: Observable<number[]>;

  constructor(public processing: ProcessingService) {
    // processing.startPPG();
  }

  ngOnInit() {
    const stream = this.node.getStream(this.data);
    if (this.smooth) {
      this.stream = stream
        .timeInterval()
        .flatMap(valueInterval => Observable
          .from(valueInterval.value)
          .map(value => Observable.of([value]).delay(valueInterval.interval / (valueInterval.value.length - 1)))
          .concatAll());
    } else {
      this.stream = stream;
    }

    // this.stream.subscribe(data => {
    //   this.processing.giveData(data);
    // });
  }

}