import React, { Component } from 'react';
import './App.css';
import PropTypes from 'prop-types';

const MyContext = React.createContext();

class MyProvider extends Component {
	state = {
		name: "Kishore",
		age: 25,
		cool: true
	}
	render() {
		return (
			<MyContext.Provider
				value={{
					state: this.state,
					growAYear: (val) => {
						this.setState({
							age: val
						});
					}
				}}
			>
				{this.props.children}
			</MyContext.Provider>
		);
	}
}

const Family = (props) => {
	return (
		<div>
			<Person />
		</div>
	);
};

class Person extends Component {

	render() {
		return (
			<MyContext.Consumer>
				{(context) => (
					<React.Fragment>
						<pre>
							{JSON.stringify(context.state, undefined, 4)}
						</pre>
						<button
							type="button"
							onClick={() => context.growAYear(context.state.age + 1)}
						>Grow Age</button>
					</React.Fragment>
				)}
			</MyContext.Consumer>
		);
	}

}

class App extends Component {

	constructor(props) {
		super(props);
	}

	render() {
		return (
			<MyProvider>
				<div>
					<p>I'm the App</p>
					<Family />
				</div>
			</MyProvider>
		);
	}

}

export default App;

Person.propTypes = {
	name: PropTypes.any
};

Family.propTypes = {
	name: PropTypes.any
};

MyProvider.propTypes = {
	children: PropTypes.any
};