import Component from '@ember/component'
import { computed, observer } from '@ember/object'
import { notEmpty } from '@ember/object/computed'
import { A } from '@ember/array'
import { get, set } from '@ember/object'
import { isBlank, isNone } from '@ember/utils'

import layout from 'leaf-semantic-core/templates/components/leaf-keywords-input'

KEYS = {
  BACKSPACE: 8
  SPACE: 32
  TAB: 9
  ENTER: 13
  SHIFT: 16
  ESC: 27
  ARROW_LEFT: 37
  ARROW_UP: 38
  ARROW_RIGHT: 39
  ARROW_DOWN: 40
  COMMA: 188
}

LeafKeywordsInput = Component.extend(
  layout: layout
  source: []
  value: []

  error: null
  valid: false

  valueAsString: computed('value', ( ->  @get('value').join(' ')))

  disabled: false
  active: true
  suggestActive: false

  classNames: ['keywords-widget', 'ui']
  classNameBindings: ['active', 'valid', 'error', 'disabled']


  hasError: computed('error', 'hasSuggestions', ( ->
    !isBlank(@get('error')) && !@get('hasSuggestions')
  ))

  placeholder: 'Enter keywords....'

  hasSuggestions: notEmpty('suggestions')

  containerId: computed('elementId', ( ->
    @get('elementId') + '-input'
  ))

  updateValue: ( ->
    tags = @get('input').getTags()
    values = @set('value', get(tags, 'values'))
    @sendAction('on-value-change', values, @get('valueAsString'))
  )

  onTagAdd: (event, tag) ->
    @updateValue()

  onTagRemove: (event, tag) ->
    @updateValue()


  needle: null
  maxSuggestions: 5

  suggestions: computed('source', 'needle', (->
    if (source = @get('source')) && (needle = @get('needle'))
      source.filter((item, index, enumerable) =>
        item.startsWith(needle.toLowerCase())
      )
    else
      []
  ))

  firstSuggestions: computed('suggestions.[]', 'maxSuggestions', (->
    @get('suggestions')?.slice(0, @get('maxSuggestions'))
  ))

  insertTag: (tag) ->
    input = @get('input')
    input.add(tag)
    input.getInput().focus()
    @set('needle', null)
    @updateValue()

  insertTopSuggestion: (needle) ->
    if (tag = @get('firstSuggestions.firstObject')) && !isBlank(needle)
      @insertTag(tag)

  sourceHasChanged: observer('source.[]', ( -> @reset()))

  reset: ->
    @setProperties
      needle: null
      #value: null
    @deactivateSub()
    input = @get('input')
    input.settings.allowedTags = @get('source')
    input.input.value = ''
    input.removeAll()
    @updateValue()


  enableState: observer('disabled', (->
    if @get('disabled')
      @deactivateSub()
      @get('input')?.disable()
    else
      @get('input')?.enable()
  ))

  didInsertElement: ->
    @_super(arguments...)

    { containerId,
      source,
      placeholder } = @getProperties('containerId', 'source', 'placeholder')

    input = new Taggle(containerId,
      allowedTags: source
      allowDuplicates: true
      delimeter: ' '
      placeholder: placeholder
      clearOnBlur: false
      submitKeys: [KEYS.COMMA, KEYS.TAB, KEYS.ENTER, KEYS.SPACE]
      onTagAdd: ((event, tag) => @onTagAdd(event, tag))
      onTagRemove: ((event, tag) => @onTagRemove(event, tag))
    )
    @set('input', input)

    inputEl = input.getInput()

    self = @
    $(inputEl).keyup((event) ->
      current = $(@).val()
      self.keyHandler(event, current)
    )



  activateSub: ->
    if @get('active') && @get('hasSuggestions')
      @setProperties
        active: false
        suggestActive: true
      @get('input').getInput().blur()

  deactivateSub: ->
    unless @get('active')
      @setProperties
        active: true
        suggestActive: false
      @get('input').getInput().focus()

  keyHandler: (event, current) ->
    return unless @get('active')
    switch event.keyCode
      when KEYS.SPACE
        @insertTopSuggestion(current)
        @deactivateSub()
        @set('needle', null)

      when KEYS.ARROW_DOWN, KEYS.TAB
        @activateSub()

      else
        @set('needle', current)

  actions:
    addSuggestion: (tag) ->
      return if @get('disabled')

      @insertTag(tag)
      @deactivateSub()

    suggestClosed: (value) ->
      @deactivateSub()

)

export default LeafKeywordsInput