const m = require('mithril')

const HoldButton = {
  oninit: function(vnode) {
    this.timer = null
    this.holding = false
    this.windowBlur = () => {
      this.timerStop()
      m.redraw()
    }
    window.addEventListener('blur', this.windowBlur)
  },

  onremove: function(vnode) {
    this.timerStop()
    window.removeEventListener('blur', this.windowBlur)
  },

  keydown(vnode, e) {
    if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
      this.timerStart(vnode)
      m.redraw()
    }
  },

  keyup(e) {
    if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
      this.timerStop()
      m.redraw()
    }
  },
  
  timerStart(vnode) {
    if (this.timer) return

    this.timer = setTimeout(this.timerConfirmed.bind(this), 2000, vnode)
    this.holding = true
  },

  timerStop() {
    clearTimeout(this.timer)
    this.timer = null
    this.holding = false
  },

  timerConfirmed(vnode) {
    this.timerStop()
    vnode.attrs.onclick()
    m.redraw()
  },
  
  view: function(vnode) {
    return m('button.holdbutton', {
      style: '--hold-bg: var(--error-bg); --hold-color: var(--error); --hold-fill: var(--error);',
      hidden: vnode.attrs.hidden,
      class: (vnode.attrs.class || '')
        + (this.holding ? ' holdbutton-active' : ''),
      onpointerdown: this.timerStart.bind(this, vnode),
      onpointerup: this.timerStop.bind(this),
      onpointerleave: this.timerStop.bind(this),
      onkeydown: this.keydown.bind(this, vnode),
      onkeyup: this.keyup.bind(this),
      onclick: e => { return false },
    }, m('div.inner', vnode.attrs.text))
  },
}

module.exports = HoldButton