import { RssiConverter } from './../../services/rssi-converter.service';
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-signal-strength',
  template: `
    <div class="container" [mdTooltip]="'rssi: ' + _rssi">
      <span *ngFor="let signal of strength" class="signal" [ngClass]="{active: signal}"></span>
   </div>
  `,
  styleUrls: ['./signal-strength.component.css'],
  providers: [RssiConverter]
})
export class SignalStrengthComponent {
  _rssi: number;

  @Input() set rssi(newValue) {
    this._rssi = newValue;
    const value = this.rssiConverter.convertToStrength(newValue);
    this.strength = this.strength.map((_, index) => index < value).reverse();
  }

  strength: boolean[] = [];

  constructor(private rssiConverter: RssiConverter) {
    for (let i = 0; i < rssiConverter.steps; i++) {
      this.strength.push(false);
    }
  }

}