//React
import * as React from 'react';
import * as ReactDOM from 'react-dom';


export class Tabs extends React.Component<any, any> {

   constructor(props) {
        super(props);
        this.state = {
            selected: 3
        }
    }

    handleClick(index, event) {
        event.preventDefault();
        this.setState({
            selected: index
        });
    }

    _renderTitles() {
        function labels(child, index) {
            let activeClass = (this.state.selected === index ? 'active' : '');
            return (
                <li key={index}>
                    <a href="#"
                        className={activeClass}
                        onClick={this.handleClick.bind(this, index)}>
                        {child.props.label}
                    </a>
                </li>
            );
        }
        return (
            <ul className="nav nav-tabs">
                {this.props.children.map(labels.bind(this))}
            </ul>
        );
    }

    _renderContent() {
        return (
            <div className="tab-content">
                {this.props.children[this.state.selected]}
            </div>
        );
    }

    render() {
        return (
            <div className="tabs">
                {this._renderTitles()}
                {this._renderContent()}
            </div>
        );
    }
}

export class TabPane extends React.Component<any, any> {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}