import React from 'react'
import { render } from 'react-dom'

var styles = {};

styles.tab = {
  display: 'inline-block',
  padding: 10,
  margin: 10,
  borderBottom: '4px solid',
  borderBottomColor: '#ccc',
  cursor: 'pointer'
};

styles.activeTab = {
  ...styles.tab,
  borderBottomColor: '#000'
};

styles.disabledTab = {
  ...styles.tab,
  opacity: 0.25,
  cursor: 'default'
};

styles.tabPanels = {
  padding: 10
};


var TabList = React.createClass({
  contextTypes: {
    activeIndex: React.PropTypes.number,
    onActivate: React.PropTypes.func
  },

  render () {
    console.log('TabList')
    var children = React.Children.map(this.props.children, (child, index) => {
      return React.cloneElement(child, {
        isActive: index === this.context.activeIndex,
        onClick: () => this.context.onActivate(index)
      })
    });
    return <div style={styles.tabs}>{children}</div>
  }
});

var Tab = React.createClass({
  render () {
    console.log('Tab')
    return (
      <div
        onClick={this.props.disabled ? null : this.props.onClick}
        style={this.props.disabled ? styles.disabledTab : (
          this.props.isActive ? styles.activeTab : styles.tab
        )}
      >
        {this.props.children}
      </div>
    );
  }
});

var TabPanels = React.createClass({
  contextTypes: {
    activeIndex: React.PropTypes.number
  },

  render () {
    console.log('TabPanels')
    return (
      <div style={styles.tabPanels}>
        {this.props.children[this.context.activeIndex]}
      </div>
    );
  }
});

var TabPanel = React.createClass({
  render () {
    console.log('TabPanel')
    return <div>{this.props.children}</div>
  }
});

var Tabs = React.createClass({

  getInitialState() {
    return {
      activeIndex: 0
    };
  },

  childContextTypes: {
    activeIndex: React.PropTypes.number,
    onActivate: React.PropTypes.func
  },

  getChildContext () {
    return {
      activeIndex: this.state.activeIndex,
      onActivate: (activeIndex) => {
        this.setState({ activeIndex })
      }
    };
  },

  render() {
    console.log('Tabs');
    return <div>{this.props.children}</div>;
  }
});

var App = React.createClass({
  render () {
    return (
      <div>
        <Tabs>
          <div>
            <TabList>
              <Tab>Tacos</Tab>
              <Tab disabled>Burritos</Tab>
              <Tab>Coconut Korma</Tab>
            </TabList>
          </div>

          <div>
            <TabPanels>
              <TabPanel>
                <p>Tacos are delicious</p>
              </TabPanel>
              <TabPanel>
                <p>Sometimes a burrito is what you really need.</p>
              </TabPanel>
              <TabPanel>
                <p>Might be your best option.</p>
              </TabPanel>
            </TabPanels>
          </div>
        </Tabs>
      </div>
    );
  }
});

render(<App/>, document.getElementById('app'))