import { Component, Input, OnInit } from '@angular/core';
import * as Mqtt from 'mqtt'

@Component({
  selector: 'app-ledindicator',
  template: `
  <div [ngStyle]="{'text-align':'center'}">
    {{ledId}}<br/>
    <span [ngStyle]="{'color':color, 'font-size':'200%'}">&#x25cf;</span>
  </div>  
  `
})
export class LedindicatorComponent implements OnInit {

  @Input() topic : string = 'invalid'
  @Input() ledId : string = 'invalid'
  color : string = 'red'

  private mqttClient : Mqtt.MqttClient

  constructor() { 
    this.mqttClient = Mqtt.connect('ws://localhost:9001')
    this.mqttClient.on('connect', () => {
      this.mqttClient.subscribe(this.topic)
    })
    this.mqttClient.on('message', (topic: string, messageBuf: Buffer) => {
      let message : string  = messageBuf.toString('UTF-8')
      if (message == 'ON') {
        this.color = 'green'
      } else if (message == 'OFF') {
        this.color = 'red'
      } else {
        this.color = 'blue'
      }
    })
  }

  ngOnInit() {
  }

}