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

class ActivatePlant extends React.Component{

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

    handleChange = (e) => {
        // console.log(e.target.id, e.target.value);

        /*
        if (activePlant !== 'undefined'){
            if (activePlant !== this.state.name) {
                this.setState({
                    isActivationButtonDisabled: false
                })
            }
        }*/
        
        this.setState({
          [e.target.id]: e.target.value
        });
      }

    // search for arrow function for further syntax knowledge
    handleActivation = (e) => {
        e.preventDefault();

        let activatedPlant
        this.props.plants.map(plant =>{
            if (plant.name === this.state.name){
                activatedPlant = plant
            }
        })

        // activePlant = activatedPlant.name

        this.props.activatePlant(activatedPlant)

        /*
        this.setState({
            isActivationButtonDisabled: true
        })*/
    }

    

    render (){
        return (
            <>
                <Form onSubmit={this.handleActivation}>
                    <Form.Group>
                        <Form.Label>Active plant:</Form.Label>
                        <Form.Control 
                            as="select"
                            type="text"
                            id="name"
                            value={this.state.name}
                            onChange={this.handleChange}
                        >
                            <option></option>
                            {this.props.plants.map((plant, index) =>{
                                return <option key={index} value={plant.name}>{plant.name}</option>
                            })}
                        </Form.Control>
                    </Form.Group>
                        <Button type={"submit"} disabled={this.state.isActivationButtonDisabled}>Activate</Button>
                </Form>
            </>
        );
    }
}

export default ActivatePlant;