import React, {Component} from "react"
class App extends Component {
    constructor() {
        super()
        this.state = {
            firstName: "",
            lastName: "",
            age: "",
            destination: "",
            milkoRLactoseAllergyorIntolerance: false,
            eggAllergyorIntolerance: false,
            shellfishAllergyOrIntolerance: false, 
            peanutorTreeNutAllergyOrIntolerance: false,  
        }
         this.handleChange = this.handleChange.bind(this)
    }
    
    handleChange(event) {
        const {name, value, type, checked} = event.target
        type === "checkbox" ? 
            this.setState({
                [name]: checked
            })
        :
        this.setState({
            [name]: value
        }) 
    }
    
    render() {
        return (
            <main>
                <form>
                    <input 
                        type = "text"
                        value = {this.state.firstName}
                        name = "firstName"
                        placeholder="First Name" 
                        onChange = {this.handleChange}
                        />
                        
                    <br />
                    <input 
                        type = "text"
                        value = {this.state.lastName}
                        name = "lastName"
                        placeholder="Last Name" 
                        onChange = {this.handleChange}
                        />
                        
                    <br />
                    <input 
                        type = "number"
                        value = {this.state.age}
                        name = "age"
                        placeholder="Age" 
                        onChange = {this.handleChange}
                        />
                        
                    <br /><br />
                    Gender:<br />
                    <label>
                        <input 
                        type = "radio"
                        value = "male"
                        name = "gender"
                        checked = {this.state.gender === "male"}
                        onChange = {this.handleChange}
                        />Male   
                    </label>
                    <br />
                    <label>
                        <input 
                        type = "radio"
                        value = "female"
                        name = "gender"
                        checked = {this.state.gender === "female"}
                        onChange = {this.handleChange}
                        />Female   
                    </label>
                    <br /><br />     
                    Where are you headed?<br />     
                    <select
                    style = {{fontSize:"12px", textAlign:"top"}}
                    value = {this.state.destination}
                    onChange = {this.handleChange}
                    name = "destination"
                    >
                    <option value="">-- Please Choose a destination --</option>
                    <option value="Bangkok">Bangkok</option>
                    <option value="Paris">Paris</option>
                    <option value="Sydney">Sydney</option>
                    <option value="Tokyo">Tokyo</option>
                    <option value="San Francisco">San Francisco</option>
                    <option value="Istanbul">Istanbul</option>
                    <option value="Kathmandu">Kathmandu</option>
                    <option value="New York City">New York City</option>
                    <option value="Rome">Rome</option>
                    </select>
                    <br /><br />
                    
                    Dietery Restrictions:<br />         
                <label>
                    <input 
                        type="checkbox" 
                        name="milkoRLactoseAllergyorIntolerance"
                        checked={this.state.milkoRLactoseAllergyorIntolerance}
                        onChange={this.handleChange}
                    />Milk or Lactose Allergy or Intolerance
                </label>
                    <br />
                 <label>
                    <input 
                        type="checkbox" 
                        name="eggAllergyorIntolerance"
                        checked={this.state.eggAllergyorIntolerance}
                        onChange={this.handleChange}
                    />Egg Allergy or Intolerance
                </label><br/>
                <label>
                    <input 
                        type="checkbox" 
                        name="shellfishAllergyOrIntolerance"
                        checked={this.state.shellfishAllergyOrIntolerance}
                        onChange={this.handleChange}
                    />Shellfish Allergy or Intolerance
                </label><br/>    
                <label>
                    <input 
                        type="checkbox" 
                        name="peanut/TreeNutAllergyOrIntolerance"
                        checked={this.state.peanutorTreeNutAllergyOrIntolerance}
                        onChange={this.handleChange}
                    />Peanut or Tree Nut Allergy Or Intolerance
                </label><br/>                    
                    <button>Submit</button>
                </form>
                <hr />
                <h2>Entered information:</h2>
                <p>Your name: {this.state.firstName} {this.state.lastName} </p>
                <p>Your age: {this.state.age}</p>
                <p>Your gender: {this.state.gender}</p>
                <p>Your destination: {this.state.destination}</p>
                <p>
                    Your dietary restrictions: 
                    {/* Dietary restrictions here, comma separated */}
                </p>
            </main>
        )
    }
}

export default App