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 (
            <>
                {
                    this.props.plants.length !== 0 ?
                    <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>
                    :null
                }           
            </>
        );
    }
}

export default ActivatePlant;

