import * as React from 'react';

class MyFirstForm extends React.Component {
	state = {
		name: '',
		color: 'blue',
		message: '',
		isChecked: true,
		choice: ""
	};

	handleChange(e, val) {

		switch (val) {
			case "name": {
				this.setState({
					name: e.target.value
				});
				break;
			}
			case "color": {
				this.setState({
					color: e.target.value
				});
				break;
			}
			case "message": {
				this.setState({
					message: e.target.value
				});
				break;
			}
			case "isChecked": {
				this.setState({
					isChecked: e.target.checked
				});
				break;
			}
			default:
				console.log("cos nie dziala w switchu");
		}
	}
	

	render() {
		return (
			<div>
				<input value={this.state.name} onChange={(e) => this.handleChange(e, "name")}/>
				<select value={this.state.color} onChange={(e) => this.handleChange(e, "color")}>
					<option value="red">Czerwony</option>
					<option value="blue">Niebieski</option>
					<option value="green">Zielony</option>
				</select>
				<textarea value={this.state.message} id="text" onChange={(e) => this.handleChange(e, "message")}/>
				<label>
					<input type="checkbox" id={"checkbox"} checked={this.state.isChecked} onChange={(e) => this.handleChange(e, "isChecked")}/>
				</label>
			</div>
		);
	}
}

export default MyFirstForm;