import React from 'react'
import { array, node, object, oneOfType, string } from 'prop-types'
import List from './List'
import Views from './Views'

class Tabs extends React.Component {
  state = {
    activeIndex: 0
  }

  onClickHandler = index => {
    this.setState({ activeIndex: index })
  }

  render() {
    const { children, className, ...props } = this.props

    return (
      <div {...props} className={className}>
        {React.Children.map(children, (child, index) => {
          if (child.type === Tabs.List) {
            return React.cloneElement(child, {
              ...child.props,
              activeIndex: this.state.activeIndex,
              onClickHandler: this.onClickHandler
            })
          } else if (child.type === Tabs.Views) {
            return React.cloneElement(child, {
              ...child.props,
              activeIndex: this.state.activeIndex
            })
          } else {
            return child
          }
        })}
      </div>
    )
  }
}

Tabs.displayName = 'Tabs'

Tabs.propTypes = {
  /** Card content */
  children: node,
  /** Additional classnames */
  className: oneOfType([string, object, array])
}

Tabs.defaultProps = {
  className: ''
}

Tabs.List = List
Tabs.List.displayName = 'Tabs.List'
Tabs.Views = Views
Tabs.Views.displayName = 'Tabs.Views'

export default Tabs