// Create new LightContext. LightContext will return a Provider and Consumer
const LightContext = React.createContext('areLightsOn');
class LightProvider extends React.Component {
    render(){
        // Allow Provider to set 'value' as whatever 'areLightsOn' prop is passed in
        return (
            <LightContext.Provider value={ this.props.areLightsOn } >
                { this.props.children }
            </LightContext.Provider>
        )
    }
}


// 'areLightsOn' are passed in as a prop
const Bulb = ({ children, className, areLightsOn })=> {
    const lightStateClassName = areLightsOn ? 'on' : 'off';
    const classNames = `bulb ${className} ${lightStateClassName}`;
    return (
        <li className={classNames}>{children}</li>
    );
}

// Add a 'Consumer' to take current 'areLightsOn' state
class LightBulb extends React.Component {
    render(){
        return (
            <LightContext.Consumer>
                { areLightsOn => (
                    <Bulb {...this.props} areLightsOn={areLightsOn} /> 
                )}
            </LightContext.Consumer>
        );
    }  
};

// Add a 'Consumer' to take current 'areLightsOn' state
class PureLightBulb extends React.PureComponent {
    render(){
        return (
            <LightContext.Consumer>
                { areLightsOn => (
                    <Bulb className="pure" {...this.props} areLightsOn={areLightsOn} /> 
                )}
            </LightContext.Consumer>
        );
    }  
}

class Wire extends React.Component {
    render(){
        return (
            <ol>
                <LightBulb />
                <PureLightBulb />
                <LightBulb />
                <LightBulb />
                <LightBulb />
                <PureLightBulb />
                <PureLightBulb />
                <PureLightBulb />
            </ol>
        )
    }
}

class Lights extends React.PureComponent {
    constructor(props){
        super(props);
        
        this.state = {
            areLightsOn: false   
        };
        
        this.toggleLights = this.toggleLights.bind(this);
    }
    
    // Remove 'getChildContext', no longer need with new context
    
    toggleLights(){
        this.setState({
           areLightsOn: ! this.state.areLightsOn 
        });
    }
    
    render(){
        return (             
            <main>
                {/* Wrap Wire in new LightProvider. Pass in state to be utilized by context */}
                <LightProvider areLightsOn={ this.state.areLightsOn }>
                    <Wire />
                </LightProvider>
                {/* Update this provider to be the opposite */}                
                <LightProvider areLightsOn={ ! this.state.areLightsOn }>
                    <Wire />
                </LightProvider>

                <button type="button" onClick={this.toggleLights}>
                    Toggle Lights
                </button>
            </main>            
        );
    }
}

// Remove 'childContextTypes', no longer need with new context

ReactDOM.render(<Lights />, document.getElementById('root'));