import { DEFAULT_TIMEZONE } from '../consts' import supportDom from '../decorators/supportDom' import isTouchDevice from '../utils/isTouchDevice' import { format } from '../utils'

@supportDom export default class TimeInput {

constructor(dom, date, options = {}) {
  this.active = false
  this.danger = false
  this.dom = dom
  this.date = date
  this.options = options
  this.tz = options.tz || DEFAULT_TIMEZONE
  this.timePattern = options.timePattern || 'HH:mm'
  this._skipDomChecking = true

  this.init()
}

init() {
  this.initInput()
  this.addEvents()
}

initInput() {
  const { dom } = this
  if (this.date) {
    dom.value = this.format(this.date)
  }
  if (! dom.hasAttribute('placeholder')) {
    dom.setAttribute('placeholder', this.timePattern.toUpperCase())
  }
  if (isTouchDevice()) {
    dom.setAttribute('readonly', 'readonly')
  }
}

format(date) {
  return format(date, this.timePattern, { timezone: this.tz })
}

setDate(date) {
  this.date = date
  this.dom.value = date ? this.format(date) : ''
}

setActive(active) {
  this.active = active
  const func = active ? 'add' : 'remove'
  this.dom.classList[func]('active')
}

setDanger(danger) {
  this.danger = danger
  const func = danger ? 'add' : 'remove'
  this.dom.classList[func]('danger')
}

clearStatus() {
  this.setActive(false)
  this.setDanger(false)
}

addEvents() {
  const { dom } = this
  this.addEvent(dom, 'focus', event => this.fire('focus', event))
  this.addEvent(dom, 'keyup', event => this.fire('keyup', event))
  this.addEvent(dom, 'blur', event => this.fire('blur', event))
}

}