import React from 'react';
import Draggable from './Draggable';

class World extends React.Component {

  constructor(){
    super();
  }

  render(){
    return (
      <Buttons>
        <button value="A">A</button>
        <button value="B">B</button>
      </Buttons>
    );
  }
}

class Buttons extends React.Component {
  constructor(){
    super();
    this.state = {
      selected: 'None'
    };
  }

  onSelected(selected){
    this.setState({
      selected
    });
  }

  render(){
    let items = React.Children.map(
      this.props.children,
      child => React.cloneElement(child, {
        onClick: this.onSelected.bind(this, child.props.value)
      }));

    return (
      <Draggable>
        <h1>Selected item is {this.state.selected}</h1>
        {items}
      </Draggable>
    );
  }

}

World.propTypes = {
};

export default World;