const m = require('mithril')
const client = require('./api/client')

const Display = {
  oninit: function(vnode) {
    this.resetStatus()
    client.registerComponent(this)
  },

  resetStatus() {
    this.serialStatus = {
      running: false,
      log: '...',
    }
  },

  onremove: function(vnode) {
    client.unregisterComponent(this)
  },

  ioInit: function() {
    client.on(this, 'serial.status', status => {
      this.serialStatus = status
    })
    client.emit('serial.status')
  },

  ioConnectionChanged(connected) {
    if (!connected) {
      this.resetStatus()
    } else {
      client.emit('serial.status')
    }
  },

  resetClicked() {
    client.emit('serial.restart')
  },

  view: function(vnode) {
    return [
      m('div.column.settings', [
        m('h2', 'Serial display'),
        m('p', 'Status'),
        m('input', {
          type: 'text',
          readonly: true,
          class: this.serialStatus.running ? 'green' : '',
          value: !client.isConnected
            ? '<Unknown>'
            : this.serialStatus.running ? 'Connected' : 'Disconnected',
        }),
        m('button.button', {
          onclick: this.resetClicked.bind(this),
        }, 'Reconnect'),
        m('p', 'Log'),
        m('pre', this.serialStatus.log || '...'),
      ]),
    ]
  },
}

module.exports = Display