import { Subscriber } from 'rxjs/Subscriber';
import { Observable } from 'rxjs/Observable';
import { NodeManagerService } from 'app/nodes/node-manager.service';
import { Component, OnInit, OnDestroy, NgZone, Input, SimpleChange, OnChanges } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Node } from 'app/nodes/node';
import { MdDialog, MdDialogRef } from '@angular/material';

@Component({
  selector: 'app-node-detail',
  template: `
    <div class="container" *ngIf="!!node" fxFlexFill>
      <app-node-config [node]="node"></app-node-config>
      <div class="menu">
        <a routerLink="/">Return to list</a>
      </div>

      <div>toggled data</div>
      <app-node-data-plotter [node]="node" [data]="datasource" *ngFor="let datasource of node.activeSources"></app-node-data-plotter>

      <div>config groups</div>
      <div *ngFor="let group of node.groups">
        <h1>{{ group.title }}</h1>
        <div *ngFor="let section of group.sections">
          <h2>{{ section.title }}</h2>
          <md-slide-toggle *ngIf="!!section.toggle" (change)="node.togglePlot(section.toggle, $event.checked)"></md-slide-toggle>
          <div *ngFor="let config of section.items">
            <app-node-config-parameter [node]="node" [param]="config"></app-node-config-parameter>
          </div>
        </div>
      </div>

      <!-- overlay shown when node is in a connecting state -->
      <div *ngIf="!(state | async)" class="connecting-overlay">
        <div class="dialog">
          <div>Connecting...</div>
          <button (click)="cancelConnect()" md-button>Cancel</button>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['./node-detail.component.scss'],
})
export class NodeDetailComponent implements OnDestroy, OnChanges {
  @Input() node: Node;
  @Input() inin: any;

  state: Observable<boolean>;

  constructor(public router: Router, private zone: NgZone) { }

  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
    if (!!changes['node'].currentValue) {
      this.setup();

      // const res = this.node.accelerationX
      //   .timeInterval()
      //   .flatMap(valueInterval =>
      //     Observable
      //       .from(valueInterval.value)
      //       .map(value => Observable.of([value]).delay(valueInterval.interval / valueInterval.value.length))
      //       .concatAll());
    }
  }

  ngOnDestroy() {
    this.node.disconnect();
  }

  setup() {
    this.state = this.node.connected
      .filter(state => !state)
      .flatMapTo(this.node.connect())
      .share();
  }

  cancelConnect() {
    this.router.navigate(['/']);
  }
}