import TimeInput from './TimeInput' import TimeMenu from './TimeMenu' import { DEFAULT_TIMEZONE } from '../consts' import supportDom from '../decorators/supportDom' import {

dateToTimestamp,
noop,
parse,
set,
timestampToDate

} from '../utils'

@supportDom export default class Timepicker {

constructor(dom, timestamp, options = {}) {
  this.dom = dom
  this.options = options
  this.options.change = options.change || noop
  this.tz = options.tz || DEFAULT_TIMEZONE

  this.date = (timestamp === null) ? null : timestampToDate(timestamp)
  this.focused = false
  this.backdropMode = options.backdropMode || 'auto'
  this.init()
}

init() {
  this.timeInput = new TimeInput(
    this.dom,
    this.date,
    this.options
  )
  this.timeMenu = new TimeMenu()
  this.addEvents()
}

clearInputStatus() {
  this.timeInput.clearStatus()
}

handleTimeInputFocus() {
  const { timeInput } = this
  this.focused = true
  this.clearInputStatus()
  timeInput.setActive(true)
  this.timeMenu.show({ src: this.dom, date: timeInput.date })
}

handleTimeInputKeyUp(event) {
  const { date, timeInput } = this
  const { value } = event.target

  if ((! timeInput.required) && (value === '')) {
    this.nextDate = null
    return
  }
  const res = parse(event.target.value, timeInput.timePattern, date)
  this.nextDate = null

  if (res.toString() === 'Invalid Date') {
    return timeInput.setDanger(true)
  }
  timeInput.setDanger(false)
  this.nextDate = res
}

handleTimeInputBlur() {
  const { nextDate, date, timeInput } = this

  if (nextDate) {
    this.date = nextDate
    timeInput.setDate(nextDate)
    this.nextDate = null
  }
  else if (date) {
    timeInput.setDate(date)
  }
}

emitChange() {
  const { date } = this
  this.options.change({
    date,
    timestamp: dateToTimestamp(date)
  })
}

hide() {
  this.focused = false
  this.clearInputStatus()
  this.timeMenu.hide()
}

addEvents() {

  this.timeInput.on('focus', () => this.handleTimeInputFocus())
  this.timeInput.on('keyup', event => this.handleTimeInputKeyUp(event))
  this.timeInput.on('blur', () => this.handleTimeInputBlur())

  this.timeMenu.on('click', (event, res) => {
    if (this.date === null) {
      this.date = set(new Date(), { hours: res.hour, minutes: res.minute })
    }
    else {
      this.date = set(this.date, { hours: res.hour, minutes: res.minute })
    }
    this.timeInput.setDate(this.date)
    this.timeMenu.hide()
    this.clearInputStatus()
    this.emitChange()
  })

  this.addEvent(document, 'click', event => {
    if (this.focused) {
      this.focused = false
      return
    }
    if (this.backdropMode === 'manual') {
      return
    }
    if (event.target === this.dom) {
      return
    }
    this.hide()
  })
}

destroy() {
  this.timeInput.destroy()
  this.timeMenu.destroy()
}

}