import Component from '@ember/component'
import { oneWay, notEmpty } from '@ember/object/computed'
import { scheduleOnce, later } from '@ember/runloop'
import { computed, observer } from '@ember/object'

import HasChildren from 'leaf-semantic-core/mixins/leaf-has-children'
import HasSelectableChildren from 'leaf-semantic-core/mixins/leaf-has-selectable-children'
import SlyEnabled from 'leaf-semantic-core/mixins/sly-enabled'
import ResizeHandler from 'leaf-semantic-core/mixins/leaf-resize-handler'

import layout from 'leaf-semantic-core/templates/components/leaf-tabs-control-slide'

LeafTabsControlSlide = Component.extend(HasChildren, HasSelectableChildren, SlyEnabled, ResizeHandler,
  layout: layout


  'menu-class': null

  sly_default_options: {
      horizontal: true,
      itemNav: 'centered',
      smart: true,
      mouseDragging: true
      touchDragging: true
      releaseSwing: true
      speed: 300
    }


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



  # 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',

  selectedChanged: observer( 'selected', ->
    scheduleOnce 'afterRender', this, ->
      if (selected = @get('selected'))
        @_slyFrame.activate(selected.get('element'))
  )


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


  resizeEnd: ->
    scheduleOnce('afterRender', this, @reloadSly)


  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)

  didInsertElement: ->
    @_super(arguments...)
    later(this, @reloadSly, 500)

  childUnregistered: ->
    @_super(arguments...)
    later(this, @reloadSly, 200)

  childRegistered: ->
    @_super(arguments...)
    later(this, @reloadSly, 200)

)

export default LeafTabsControlSlide