import Component from '@ember/component'
import { alias } from '@ember/object/computed'
import { observer, computed } from '@ember/object'

import HasParent from 'leaf-semantic-core/mixins/leaf-has-parent'
import layout from 'leaf-semantic-core/templates/components/leaf-content-panel'

NavsPanel = Component.extend(HasParent,
  layout: layout

  tagName: 'div'
  classNames: ['ui', 'transition']

  attributeBindings: ['selected', 'active']
  classNameBindings: ['active', 'loading', 'segment', 'active:visible:hidden']

  delayRender: alias('parent.delay-render')

  rendered: computed('delayRender', 'active',  ->
    @get('active') || !@get('delayRender')
  )


  #
  active: false

  #
  segment: false

  #
  loading: false


  #
  #
  #
  mandatoryParent: true

  #
  # reference to the nav content item
  #
  'nav-content': null

  #
  # A reference to the parent children property.
  #
  # @property panels
  # @type Array
  #
  panels: Ember.computed.alias 'parent.children'


  #
  # true if this nav is active/selected
  #
  active: Ember.computed.alias('selected')

  #
  # true if this nav is currently selected.
  #
  # @property selected
  # @type Boolean
  #
  selected: computed('parent.selected', ->
    @get('parent.selected') == this
  )


)

export default NavsPanel