import React, {Component} from 'react';


class SignupForm extends Component{
    constructor(props){
        super(props);

        this.state = {userName:'', password:'', country:'',subscribe:false};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event){
        console.log(`${event.target.name} : ${event.target.value}`);
        //this.setState({name: event.target.value.toUpperCase()})
        this.setState({[event.target.name]: event.target.value});
        if(event.target.name=="subscribe")
        this.setState({[event.target.name]: event.target.checked});
    }

    handleSubmit(event){
        alert("User Name : "+this.state.userName+"\nPassword : "+this.state.password+ "\nCountry : "+this.state.country+"\nSubscribe : "+this.state.subscribe);
        event.preventDefault();
    }

    render(){
        return(
            <form onSubmit ={this.handleSubmit}>
            <label>Username :
            <input
                type="text"
                value={this.state.userName}
                name="userName"
                onChange={this.handleChange}/>
            </label>
            <br/><br/>
            <div>
            <label>Password :
            <input
                type="password"
                value={this.state.password}
                name="password"
                onChange={this.handleChange}/>
            </label>
            </div>

            <br/><br/>
            <div>
                <label>Select Country
                <select  name = "country" value={this.state.country}
                    onChange={this.handleChange}>
                    <option value="India">India</option>
                    <option value="Australia">Australia</option>
                    <option value="United States">United States</option>
                    <option value="Canada">Canada</option>
                </select>
                </label>
            </div>

            <br/><br/>
            <div>
                <label>
                    <input
                        type="checkbox"
                        name="subscribe"

                        onChange={this.handleChange}/>Subscribe to NewsLetter
                </label>
            </div>
            <br/><br/>
            <input type='submit' value="Sign up"/>
            </form>
        )
    }
}

export default SignupForm;