var data = [
	{
		id: 1,
		name: "Chewbacca",
		phone: "+848168",
		img: "/img/01.jpg",
		adress: "adressElement",
		email: "email@mail.ru"
	},
	{
		id: 2,
		name: "Leia",
		phone: "+848168",
		img: "/img/01.jpg",
		adress: "adressElement",
		email: "email@mail.ru"
	},
	{
		id: 3,
		name: "Darth Wader",
		phone: "+848168",
		img: "/img/01.jpg",
		adress: "adressElement",
		email: "email@mail.ru"
	}
];

var ContactsList = React.createClass({
	//обозначили начальное состояние
	getInitialState: function() {
		return {
			displayedContacts: data
		};
	},

	onChang: function(e) {
		var elem = e.target.value;
		var displayedContacts = data.filter(function(el) {
			var nameQuery = el.name.toLowerCase();

			return nameQuery.indexOf(elem) !== -1;
		});

		this.setState({
			displayedContacts: displayedContacts
		})
	},

	render: function() {
		return (
			<div className="contList">
				<input type="text" placeholder="Enter" onChange={this.onChang} />
				<ul>
					{
						this.state.displayedContacts.map(function(elem, idx) {
							return <li><Contact key={elem.id} image={elem.img} name={elem.name} phoneNumber={elem.phone} adress={elem.adress} email={elem.email} /></li>
						})
					}
				</ul>
			</div>
		)
	}
});

var Contact = React.createClass({
	getInitialState: function() {
		return {
			isOpened: false
		}
	},

	onClickFunc: function() {
		this.setState({
			isOpened: true
		})
	},

	render: function() {
		return (
			<div onClick={this.onClickFunc}>
				<img src={this.props.image} />
				<h3>{this.props.name}</h3>
				<p>{this.props.phoneNumber}</p>

				{
					(this.state.isOpened) ? <div><p>{this.props.adress}</p><p>{this.props.email}</p></div> : <div></div>
				}

			</div>
		)
	}
});

ReactDOM.render(<ContactsList />, document.getElementById("content"));