import { Component, OnInit, Input } from '@angular/core';
import { Node } from 'app/nodes/node';
import { IConfig, IParam } from 'app/nodes/configs.interfaces';
import { PARAMETER_TYPE } from 'app/nodes/types';

@Component({
  selector: 'app-node-config-parameter',
  template: `
    <div>{{param.name}} - {{ value / max | percent }}</div>
    <div [ngSwitch]="param.type">

      <md-select *ngSwitchCase="types.DROPDOWN" placeholder="State" (change)="updateConfig($event.value)">
        <md-option *ngFor="let state of param.values" [value]="state.value">{{ state.key }}</md-option>
      </md-select>

      <md-slider *ngSwitchDefault [min]="min" [max]="max" step="1" value="0" (change)="updateConfig($event.value)"></md-slider>
    </div>
  `,
  styleUrls: ['./node-config-parameter.component.scss']
})
export class NodeConfigParameterComponent implements OnInit {
  @Input() node: Node;
  @Input() param: IParam;

  min = 0;
  max = 1;
  value = 0;

  types = PARAMETER_TYPE;

  ngOnInit() {
    this.max = Math.pow(2, this.param.bits) - 1;
  }

  updateConfig(value) {
    this.node.updateConfig(this.param, value);
    this.value = value;
  }

}