import React from 'react'

const ThemeContext = React.createContext({
  color: 'orange',
  toggleColor() {},
})

class Theme extends React.Component {
  state = {
    color: 'orange',
    toggleColor: () => {
      this.setState({
        color: this.state.color === 'orange' ? 'purple' : 'orange',
      })
    },
  }

  render() {
    return (
      <ThemeContext.Provider value={this.state}>
        {this.props.children}
      </ThemeContext.Provider>
    )
  }
}

const Button = props => (
  <ThemeContext.Consumer>
    {({ color, toggleColor }) => (
      <button style={{ color }} onClick={toggleColor}>
        {props.text}
      </button>
    )}
  </ThemeContext.Consumer>
)

const App = () => (
  <Theme>
    <Button text="hey!" />
  </Theme>
)