const m = require('mithril')
const signal = require('@preact/signals-core')
const client = require('./api/client')

const Menu = {
  oninit: function(vnode) {
    this.currentPath = '/'
    this.disconnected = false
    this.disconnectedTimeout = null
    client.registerComponent(this)
    this.effects = signal.effect()
    this.onbeforeupdate()
  },

  ioConnectionChanged(connected) {
    if (connected) {
      clearTimeout(this.disconnectedTimeout)
      this.disconnectedTimeout = null
      this.disconnected = false
    } else {
      this.disconnectedTimeout = setTimeout(() => {
        this.disconnected = true
        m.redraw()
      }, 3000)
    }
  },

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

  onbeforeupdate: function() {
    this.currentPath = m.route.get() || '/'
  },

  isActive: function(path) {
    return 'icon ' + (this.currentPath === path ? 'active' : '')
  },

  createLink: function(link, icon, extra = {}) {
    return m(m.route.Link, {
      class: this.isActive(link),
      href: link
    }, m('i.fal.fa-' + icon, extra))
  },

  view: function() {
    return [
      this.disconnected
      ? m('.disconnected', [
          m('.top'), m('.left'), m('.right'), m('.bottom'),
          m('.error', [
            m('h4', 'Connecting to server...'),
            m('p', [
              'If this is taking too long, the server might be down.',
              m('br'),
              'Try restarting the stream computer.',
            ]),
          ]),
        ])
        : null,
      m('nav.row', [
        m('h2.logo', m(m.route.Link, { href: '/' }, 'Stream controls')),
        m('div.filler'),
        this.createLink('/display', 'display', { class: client.status.serial_running ? 'green' : '' }),
        this.createLink('/encoder', 'video', { class: client.status.encoder_running ? 'red' : '' }),
      ]),
    ]
  },
}

module.exports = Menu