import React, {Component} from 'react';

class Form extends Component{

	constructor(props){
		super(props);

		this.state = {
			username: '',
			comments: '',
			topic: '',
		}

		this.handleUsernameChange = this.handleUsernameChange.bind(this);
		this.handleCommentsChange = this.handleCommentsChange.bind(this);
		this.handleTopikChange = this.handleTopikChange.bind(this);
	}

	handleUsernameChange = (event) => {
		this.setState({
			username: event.target.value
		})
	}

	handleCommentsChange = (event) => {
		this.setState({
			comments: event.target.value
		})
	}

	handleTopikChange = (event) => {
		this.setState({
			topic: event.target.value
		},()=>{
			console.table(this.state)
		})
	}

	submitEvent = (event) => {
		console.log(this.state)
		event.preventDefault()
	}

	render(){
		return (
			<form onSubmit={this.submitEvent}>
				<div className="form-group">
					<label>Username</label>
					<input type="text" className="form-control" value={this.state.username} onChange={this.handleUsernameChange} />
				</div>

				<div className="form-group">
					<label>Commnets</label>
					<textarea type="text" className="form-control" value={this.state.commetns} onChange={this.handleCommentsChange} />
				</div>



				<div className="form-group">
					<label>Topic</label>
					<select type="text" className="form-control" value={this.state.topic} onChange={this.handleTopikChange}>
						<option value="react">react</option>
						<option value="angular">angular</option>
						<option value="vue">vue</option>
					</select>
				</div>
				<button type="submit" className="btn btn-success">Save</button>
				<button type="reset" className="btn btn-success">cancel</button>
			</form>
		)
	}

}

export default Form;