Rev.registerComponent 'StatelessTabsAccordion',

  getDefaultProps: ->
    onChange: () -> # noop
    activeKey: null

  render: ->
    <ul className="RevAccordion accordion">
      {@getNormalizedChildren().map @renderChild}
    </ul>

  renderChild: (child) ->
    active = child.key == @props.activeKey

    className = @classSet
      "RevTabsAccordion": true
      "RevTabsAccordion is-active": true
      "accordion-navigation": true
      "active": active

    tab = React.cloneElement child.props.tab,
      onClick: @handleTabClick child

    content = React.cloneElement child,
      active: active

    <li key={child.key} className={className}>
      {tab}
      {content}
    </li>

  handleTabClick: (activeTab) -> (e) =>
    e.preventDefault()
    e.stopPropagation()
    e.activeTab = activeTab
    @props.onChange(e)

Rev.registerComponent 'TabsAccordion',

  getDefaultProps: ->
    onChange: () -> # noop

  getInitialState: ->
    activeKey: null

  render: ->
    <Rev.Components.StatelessTabsAccordion
      {...@props}
      activeKey={@state.activeKey}
      onChange={@handleChange}
    />

  handleChange: (e) ->
    if e.activeTab.key == @state.activeKey
      e.activeTab = null
    @setState activeKey: e.activeTab?.key or null
    @props.onChange e