import React from 'react'

import { Button, Form, Container, Row, Col, Table } 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);
        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.setState({ // reset state
            name: '',
            type: ''
        })
        this.props.addPlant(this.state)
    }

    

    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={(e)=>this.setState({name:e.target.value})} />
                    </Form.Group>
                    <Form.Group>
                        <Form.Label>Type:</Form.Label>
                        <Form.Control 
                            as="select"
                            type="text"
                            id="type"
                            value={this.state.type}
                            onChange={(e)=>this.setState({type:e.target.value})}
                        >
                            <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;

