import React, { Component } from 'react'
import classnames from 'classnames'

import { string, object, array, node, oneOfType, number } from 'prop-types'
import AccordionItem from './AccordionItem'

class Accordion extends Component {
  state = {
    activeKey: this.props.defaultActiveKey
  }

  setActiveKey = index => {
    const { activeKey } = this.state
    const newIndex = activeKey === index ? -1 : index
    this.setState({ activeKey: newIndex })
  }

  render() {
    const { children, className, defaultActiveKey, ...props } = this.props
    const accordionStyles = classnames('sw-accordion', className)

    const childItems = React.Children.map(children, (child, i) =>
      React.cloneElement(child, {
        open: this.state.activeKey === i,
        onToggle: () => this.setActiveKey(i)
      })
    )

    return (
      <div className={accordionStyles} role="tablist" {...props}>
        {childItems}
      </div>
    )
  }
}

Accordion.propTypes = {
  /** Child Content */
  children: node,
  /** Additional externs classnames */
  className: oneOfType([string, object, array]),
  /** Default accordion item to display as open */
  defaultActiveKey: number
}

Accordion.defaultProps = {
  defaultActiveKey: -1
}

Accordion.displayName = 'Accordion'

Accordion.Item = AccordionItem
Accordion.Item.displayName = 'Accordion.Item'

export default Accordion