import React from 'react'
import { Container, Row, Col} from 'react-bootstrap';

import AddPlant from './AddPlant'
import Plants from './Plants'
import ActivatePlant from './ActivatePlant'
import {getAllPlantTypes} from "../api/plantTypes";

class Settings extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            plants: [],
            types: [],
        }
    }

    componentDidMount() {
        (async ()=>{
            this.setState({
                types: getAllPlantTypes(),
            })
        })();
    }

    // pass this function to the addplant comp as a prop
    addPlant = (plant) => {
        plant.id = this.state.plants.length + 1 // TODO rework

        let plants = [...this.state.plants, plant]; // create a copy of the array and add the new plant to it

        this.setState({
            plants: plants
        })
    }

    deletePlant = (id) => {
        let plants = this.state.plants.filter(plant =>{ // callback function
            return plant.id !== id // when it returns false (the id is the same), it filters this object out of the array
        })
        this.setState({
            plants: plants
        })
    }

    activatePlant = (plant) => {
        console.log('The plant ' + plant.name + ' will be monitored')
        // TODO head for activate logic
    }

    render(){
        return (
            <>  
                <Container>
                    <Row className="justify-content-md-center">
                        <Col md="auto">
                            <h1>Settings</h1>
                        </Col>
                    </Row>
                    <Row className="justify-content-md-center">
                        <a>Configurate your plant here. Based on your settings the smart garden will automate your plant environment.</a>
                    </Row>

                    <br></br>

                    <AddPlant 
                        addPlant={this.addPlant}
                        typeArray={this.state.types}
                    ></AddPlant>
                    

                    <Row className="justify-content-md-center">
                        <Col md={{ span: 4, offset: 4 }}></Col>
                    </Row>

                    <br></br>
                    
                    <Plants 
                        plants={this.state.plants}
                        deletePlant={this.deletePlant}
                    ></Plants>

                    <ActivatePlant
                        plants={this.state.plants}
                        activatePlant={this.activatePlant}
                    >
                    </ActivatePlant>

                </Container>

            </>
        );
    }

}

export default Settings;