class App.ColumnSelect extends Spine.Controller
  elements:
    '.js-pool': 'pool'
    '.js-selected': 'selected'
    '.js-shadow': 'shadow'
    '.js-placeholder': 'placeholder'
    '.js-pool .js-option': 'poolOptions'
    '.js-selected .js-option': 'selectedOptions'
    '.js-search': 'search'
    '.js-clear': 'clearButton'

  events:
    'click .js-select': 'onSelect'
    'click .js-remove': 'onRemove'
    'input .js-search': 'filter'
    'click .js-clear': 'clear'
    'keydown .js-search': 'onFilterKeydown'

  className: 'form-control columnSelect'

  element: =>
    @el

  constructor: ->
    super
    @render()

    @throttledRemove = _.throttle =>
      @remove @pickedValue
    , 300, {trailing: false}

    @throttledSelect = _.throttle =>
      @select @pickedValue
    , 300, {trailing: false}

  render: ->
    @values = []
    _.each @options.attribute.options, (option) =>
      if option.selected
        @values.push option.value.toString()

    @html App.view('generic/column_select')
      attribute: @options.attribute
      values: @values

    # keep inital height
    # disabled for now since controls in modals get rendered hidden
    # and thus have no height
    # setTimeout =>
    #   @el.css 'height', @el.height()
    # , 0

  onSelect: (event) ->
    @pickedValue = $(event.currentTarget).attr('data-value')
    @throttledSelect()

  select: (value) ->
    @selected.find("[data-value='#{value}']").removeClass 'is-hidden'
    @pool.find("[data-value='#{value}']").addClass 'is-hidden'
    @values.push(value)
    @shadow.val(@values)
    @shadow.trigger('change')

    @placeholder.addClass 'is-hidden'

    if @search.val() and @poolOptions.not('.is-filtered').not('.is-hidden').size() is 0
      @clear()

  onRemove: (event) ->
    @pickedValue = $(event.currentTarget).attr('data-value')
    @throttledRemove()

  remove: (value) ->
    @pool.find("[data-value='#{value}']").removeClass 'is-hidden'
    @selected.find("[data-value='#{value}']").addClass 'is-hidden'
    @values.splice(@values.indexOf(value), 1)
    @shadow.val(@values)
    @shadow.trigger('change')

    if !@values.length
      @placeholder.removeClass 'is-hidden'

  filter: (event) ->
    filter = $(event.currentTarget).val()

    @poolOptions.each (i, el) ->
      return if $(el).hasClass('is-hidden')

      if $(el).text().toLowerCase().indexOf(filter.toLowerCase()) > -1
        $(el).removeClass 'is-filtered'
      else
        $(el).addClass 'is-filtered'

    @clearButton.toggleClass 'is-hidden', filter.length is 0

  clear: ->
    @search.val('')
    @poolOptions.removeClass 'is-filtered'
    @clearButton.addClass 'is-hidden'

  onFilterKeydown: (event) ->
    return if event.keyCode != 13

    event.stopPropagation()
    event.preventDefault()

    firstVisibleOption = @poolOptions.not('.is-filtered').not('.is-hidden').first()
    if firstVisibleOption
      @select firstVisibleOption.attr('data-value')