import React from 'react'
import { Button, Form } from 'react-bootstrap';

class AddPlant extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            name: '',
            type: ''
        }
    }

    handleChange = (e) => {
        // console.log(e.target.id, e.target.value); // e.target.id reference to the state which is changed
        this.setState({
          [e.target.id]: e.target.value
        });
    }

    // search for arrow function for further syntax knowledge
    handleSubmit = (e) => {
        e.preventDefault();
        //console.log(this.state)
        
        this.props.addPlant(this.state)

        this.setState({ // reset state
            name: '',
            type: ''
        })
    }

    

    render (){
        return (
            <>
                <Form onSubmit={this.handleSubmit}>
                    <Form.Group>
                        <Form.Label>Name:</Form.Label>
                        <Form.Control
                            type="text"
                            id="name"
                            value={this.state.name}
                            autoFocus ref={(input) => {this.nameInput=(input)}}
                            placeholder="plant"
                            onChange={this.handleChange} />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Type:</Form.Label>
                        <Form.Control 
                            as="select"
                            type="text"
                            id="type"
                            value={this.state.type}
                            onChange={this.handleChange}
                        >
                            <option></option>
                            {this.props.typeArray.map((type, index) =>{
                                return <option key={index} value={type}>{type}</option>
                            })}
                        </Form.Control>
                    </Form.Group>
                        <Button type={"submit"}>Submit</Button>
                </Form>
            </>
        );
    }
}

export default AddPlant;