import Component from '@ember/component'
import { scheduleOnce } from '@ember/runloop'

import HasChildren from 'leaf-semantic-core/mixins/leaf-has-children'
import HasSelectableChildren from 'leaf-semantic-core/mixins/leaf-has-selectable-children'
import layout from 'leaf-semantic-core/templates/components/leaf-tabs-control'

TabsControl = Component.extend(HasChildren, HasSelectableChildren,
  layout: layout

  #tagName: ''
  classNames: ['ui', 'pointing', 'menu']
  classNameBindings: ['secondary']

  attributeBindings: ['aria-multiselectable', 'role'],


  #
  # simple style
  #
  simple: false

  #
  #
  #
  justified: false

  # Tells screenreaders that only one tab can be selected at a time.
  #
  # @property aria-multiselectable
  # @type String
  # @default false
  #
  'aria-multiselectable': false

  #
  # The `role` attribute of the tab list element.
  #
  # See http://www.w3.org/TR/wai-aria/roles#tablist
  #
  # @property role
  # @type String
  # @default 'tablist'
  #
  role: 'tablist',

  #
  # Gives focus to the selected tab.
  #
  # @method focusSelectedTab
  #
  focusSelectedTab: ->
    @get('selected').$().focus()

  keyDown: ((event)->
    @_super(event)
    switch event.keyCode
      # left, up
      when 37, 38 then @selectPreviousChild()
      # right, down
      when 39, 40 then @selectNextChild()

    event.preventDefault()
    scheduleOnce('afterRender', this, @focusSelectedTab);
  )
)

export default TabsControl