import React from 'react';
import classnames from 'classnames';

class Tabs extends React.Component {
  constructor() {
    super();
    this.state = {
      selectedIndex: 0
    };
  }

  getSelected(index) {
    return this.state.selectedIndex === index;
  }

  handleTabChange(newTabIndex) {
    this.setState({
      selectedIndex: newTabIndex
    });
  }

  render() {
    let tabContent = null;

    const tabs = this.props.children.map((tab, index) => {
      const isSelected = this.getSelected(index);

      if (isSelected) tabContent = tab.props.children;

      return React.cloneElement(tab, {
        key: index,
        index: index,
        selected: isSelected,
        handleTabClick: (newTabIndex) => this.handleTabChange(newTabIndex)
      });
    });

    return (
      <div className={classnames('TabbedContent', this.props.className)}>
        <div className="TabbedContent-tabs">{tabs}</div>
        {tabContent}
      </div>
    );
  }

}

Tabs.propTypes = {
  children: React.PropTypes.node,
  className: React.PropTypes.string
};

export default Tabs;